@extends('layouts.admin')

@section('title', 'Detail Mutasi & Promosi - ' . ($item->pegawai->nama_lengkap ?? 'Pegawai'))

@section('content')
<div class="space-y-6">
    <!-- Breadcrumb & Top Actions -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-2 text-xs text-slate-500 mb-1">
                <a href="{{ route('admin.mutasi-promosi.index') }}" class="hover:text-primary-600 transition-colors">Mutasi & Promosi</a>
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                <span class="text-slate-700 font-semibold">Detail Usulan #{{ $item->id }}</span>
            </div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Detail Perubahan Karir Pegawai</h1>
        </div>

        <div class="flex items-center gap-2 flex-wrap">
            <a href="{{ route('admin.mutasi-promosi.index') }}" class="px-3.5 py-2 rounded-xl bg-white border border-slate-200 text-slate-700 text-xs font-semibold hover:bg-slate-50 transition-colors">
                <i data-lucide="arrow-left" class="w-4 h-4 inline mr-1"></i> Kembali
            </a>

            @if($item->status == 'disetujui')
            <a href="{{ route('admin.mutasi-promosi.cetak-sk', $item->id) }}" target="_blank" class="px-3.5 py-2 rounded-xl bg-indigo-50 border border-indigo-200 text-indigo-700 hover:bg-indigo-100 text-xs font-bold transition-colors flex items-center gap-1.5 shadow-sm">
                <i data-lucide="printer" class="w-4 h-4"></i>
                <span>Cetak SK Resmi</span>
            </a>
            @endif

            @canany(['mutasi.manage', 'kenaikan_pangkat.manage'])
                @if(in_array($item->status, ['diajukan', 'diverifikasi']))
                <button onclick="document.getElementById('modalTolakUsulan').classList.remove('hidden')" class="px-3.5 py-2 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 hover:bg-rose-100 text-xs font-bold transition-colors flex items-center gap-1.5">
                    <i data-lucide="x" class="w-4 h-4"></i>
                    <span>Tolak Usulan</span>
                </button>

                <form action="{{ route('admin.mutasi-promosi.approve', $item->id) }}" method="POST" class="inline" onsubmit="return confirm('Apakah Anda yakin menyetujui mutasi/promosi ini? Posisi pegawai pada master data akan langsung disahkan.');">
                    @csrf
                    <button type="submit" class="px-4 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold shadow-md shadow-emerald-500/20 transition-all flex items-center gap-1.5">
                        <i data-lucide="check" class="w-4 h-4"></i>
                        <span>Setujui & Terapkan Sekarang</span>
                    </button>
                </form>
                @endif
            @endcanany
        </div>
    </div>

    <!-- Alert Status -->
    @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('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

    <!-- Profile Header Card -->
    <div class="p-6 rounded-3xl bg-white border border-slate-200/80 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-6">
        <div class="flex items-center gap-4">
            <div class="w-16 h-16 rounded-2xl bg-slate-100 border border-slate-200 flex items-center justify-center font-black text-slate-700 text-xl overflow-hidden shrink-0">
                @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>
                <div class="flex items-center gap-2.5">
                    <h2 class="text-xl font-bold text-slate-900">{{ $item->pegawai->nama_lengkap ?? 'Pegawai Terhapus' }}</h2>
                    <!-- Badge Jenis -->
                    @if($item->jenis_perubahan == 'promosi')
                    <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-emerald-50 text-emerald-700 border border-emerald-200 flex items-center gap-1">
                        <i data-lucide="trending-up" class="w-3 h-3"></i> Promosi
                    </span>
                    @elseif($item->jenis_perubahan == 'mutasi')
                    <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-blue-50 text-blue-700 border border-blue-200 flex items-center gap-1">
                        <i data-lucide="arrow-left-right" class="w-3 h-3"></i> Mutasi
                    </span>
                    @elseif($item->jenis_perubahan == 'rotasi')
                    <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-indigo-50 text-indigo-700 border border-indigo-200 flex items-center gap-1">
                        <i data-lucide="refresh-cw" class="w-3 h-3"></i> Rotasi
                    </span>
                    @else
                    <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-rose-50 text-rose-700 border border-rose-200 flex items-center gap-1">
                        <i data-lucide="trending-down" class="w-3 h-3"></i> Demosi
                    </span>
                    @endif
                </div>
                <div class="flex items-center gap-4 text-xs text-slate-500 mt-1">
                    <span class="font-mono">NIP: {{ $item->pegawai->nip ?? '-' }}</span>
                    <span>•</span>
                    <span>Status Kerja: <span class="capitalize font-semibold text-slate-700">{{ $item->pegawai->status_kerja ?? '-' }}</span></span>
                    <span>•</span>
                    <span>Bergabung Sejak: {{ $item->pegawai?->tanggal_masuk ? $item->pegawai->tanggal_masuk->format('d M Y') : '-' }}</span>
                </div>
            </div>
        </div>

        <!-- Status Card Ringkas -->
        <div class="p-3.5 rounded-2xl bg-slate-50 border border-slate-200/80 flex items-center gap-4 shrink-0">
            <div>
                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Status Pengesahan</span>
                <div class="mt-0.5">
                    @if($item->status == 'disetujui')
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-emerald-500 text-white shadow-sm shadow-emerald-500/20">
                        <i data-lucide="check" class="w-3.5 h-3.5"></i> Telah Disahkan
                    </span>
                    @elseif($item->status == 'diajukan' || $item->status == 'diverifikasi')
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-amber-500 text-white shadow-sm shadow-amber-500/20">
                        <i data-lucide="clock" class="w-3.5 h-3.5"></i> Menunggu Persetujuan
                    </span>
                    @elseif($item->status == 'ditolak')
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-rose-600 text-white shadow-sm shadow-rose-500/20">
                        <i data-lucide="x" class="w-3.5 h-3.5"></i> Ditolak
                    </span>
                    @else
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold bg-slate-500 text-white">
                        Dibatalkan
                    </span>
                    @endif
                </div>
            </div>
            @if($item->disetujuiOleh)
            <div class="border-l border-slate-200 pl-4 text-xs">
                <span class="text-[10px] text-slate-400 block">{{ $item->status == 'disetujui' ? 'Disetujui Oleh' : 'Diproses Oleh' }}</span>
                <span class="font-bold text-slate-800">{{ $item->disetujuiOleh->name }}</span>
                <span class="text-[10px] text-slate-400 block">{{ $item->waktu_approval ? $item->waktu_approval->format('d/m/Y H:i') : '' }}</span>
            </div>
            @endif
        </div>
    </div>

    @if($item->status == 'ditolak' && $item->alasan_penolakan)
    <!-- Banner Alasan Penolakan -->
    <div class="p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-900 text-xs space-y-1">
        <span class="font-bold flex items-center gap-1.5 text-rose-700">
            <i data-lucide="alert-triangle" class="w-4 h-4"></i> Catatan Penolakan Usulan:
        </span>
        <p class="text-rose-800 font-medium pl-5">{{ $item->alasan_penolakan }}</p>
    </div>
    @endif

    <!-- Informasi Legalitas SK & Tanggal Efektif -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <!-- Nomor SK -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm">
            <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider block">Nomor Keputusan (SK)</span>
            <p class="text-sm font-bold text-slate-800 font-mono mt-1">{{ $item->nomor_sk ?: 'Belum Diterbitkan' }}</p>
        </div>

        <!-- Tanggal SK -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm">
            <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider block">Tanggal Penetapan SK</span>
            <p class="text-sm font-bold text-slate-800 mt-1">
                {{ $item->tanggal_sk ? $item->tanggal_sk->translatedFormat('d F Y') : '-' }}
            </p>
        </div>

        <!-- Tanggal Efektif -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm">
            <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider block">Mulai Berlaku Efektif</span>
            <p class="text-sm font-bold text-primary-700 mt-1">
                {{ $item->tanggal_efektif ? $item->tanggal_efektif->translatedFormat('d F Y') : '-' }}
            </p>
        </div>

        <!-- Berkas SK -->
        <div class="p-4 rounded-2xl bg-white border border-slate-200/80 shadow-sm flex items-center justify-between">
            <div>
                <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider block">Dokumen Berkas SK</span>
                <span class="text-xs text-slate-600 mt-1 block">
                    {{ $item->dokumen_sk ? 'File Tersedia' : 'Belum diunggah' }}
                </span>
            </div>
            @if($item->dokumen_sk)
            <a href="{{ asset('storage/' . $item->dokumen_sk) }}" target="_blank" class="p-2 rounded-xl bg-primary-50 text-primary-600 hover:bg-primary-100 transition-colors" title="Lihat Berkas SK">
                <i data-lucide="file-text" class="w-5 h-5"></i>
            </a>
            @endif
        </div>
    </div>

    <!-- VISUAL SIDE-BY-SIDE: Perbandingan Sebelum vs Sesudah -->
    <div class="rounded-3xl bg-white border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="p-5 border-b border-slate-100 flex items-center justify-between">
            <div>
                <h3 class="font-bold text-slate-900 text-sm">Komparasi Perubahan Posisi (Sebelum vs Sesudah)</h3>
                <p class="text-xs text-slate-500 mt-0.5">Tinjau perbedaan jabatan, departemen, kantor kerja, dan kompensasi</p>
            </div>
            <span class="text-[11px] text-slate-400">Tanda <span class="text-emerald-700 font-bold bg-emerald-50 px-2 py-0.5 rounded border border-emerald-200">Berubah</span> menandakan parameter yang diperbarui</span>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse text-xs">
                <thead>
                    <tr class="border-b border-slate-200 bg-slate-50 text-[11px] font-bold uppercase tracking-wider">
                        <th class="py-3 px-5 text-slate-500 w-1/4">Parameter</th>
                        <th class="py-3 px-5 text-slate-500 w-5/12 bg-slate-100/60">Posisi Asal (Sebelum)</th>
                        <th class="py-3 px-5 text-primary-800 w-5/12 bg-primary-50/50">Posisi Baru (Sesudah)</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    <!-- 1. Jabatan -->
                    @php $isJabatanBeda = $item->jabatan_lama_id != $item->jabatan_baru_id; @endphp
                    <tr class="hover:bg-slate-50/50">
                        <td class="py-3.5 px-5 font-bold text-slate-700 flex items-center justify-between">
                            <span>Jabatan & Tingkat Level</span>
                            @if($isJabatanBeda)
                            <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">Berubah</span>
                            @endif
                        </td>
                        <td class="py-3.5 px-5 bg-slate-50/40 text-slate-600 font-medium">
                            {{ $item->jabatanLama->nama_jabatan ?? '-' }}
                            @if($item->jabatanLama?->tingkat_level)
                            <span class="text-[11px] text-slate-400 block font-normal">Level {{ $item->jabatanLama->tingkat_level }}</span>
                            @endif
                        </td>
                        <td class="py-3.5 px-5 bg-primary-50/20 font-bold {{ $isJabatanBeda ? 'text-primary-800' : 'text-slate-700' }}">
                            {{ $item->jabatanBaru->nama_jabatan ?? '-' }}
                            @if($item->jabatanBaru?->tingkat_level)
                            <span class="text-[11px] text-primary-600 block font-normal">Level {{ $item->jabatanBaru->tingkat_level }}</span>
                            @endif
                        </td>
                    </tr>

                    <!-- 2. Departemen -->
                    @php $isDepBeda = $item->departemen_lama_id != $item->departemen_baru_id; @endphp
                    <tr class="hover:bg-slate-50/50">
                        <td class="py-3.5 px-5 font-bold text-slate-700 flex items-center justify-between">
                            <span>Departemen</span>
                            @if($isDepBeda)
                            <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">Berubah</span>
                            @endif
                        </td>
                        <td class="py-3.5 px-5 bg-slate-50/40 text-slate-600 font-medium">
                            {{ $item->departemenLama->nama_departemen ?? '-' }}
                        </td>
                        <td class="py-3.5 px-5 bg-primary-50/20 font-bold {{ $isDepBeda ? 'text-primary-800' : 'text-slate-700' }}">
                            {{ $item->departemenBaru->nama_departemen ?? '-' }}
                        </td>
                    </tr>

                    <!-- 3. Divisi -->
                    @php $isDivBeda = $item->divisi_lama_id != $item->divisi_baru_id; @endphp
                    <tr class="hover:bg-slate-50/50">
                        <td class="py-3.5 px-5 font-bold text-slate-700 flex items-center justify-between">
                            <span>Divisi Kerja</span>
                            @if($isDivBeda)
                            <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">Berubah</span>
                            @endif
                        </td>
                        <td class="py-3.5 px-5 bg-slate-50/40 text-slate-600">
                            {{ $item->divisiLama->nama_divisi ?? '-' }}
                        </td>
                        <td class="py-3.5 px-5 bg-primary-50/20 {{ $isDivBeda ? 'text-primary-800 font-bold' : 'text-slate-700 font-medium' }}">
                            {{ $item->divisiBaru->nama_divisi ?? '-' }}
                        </td>
                    </tr>

                    <!-- 4. Lokasi Cabang / Kantor -->
                    @php $isLokasiBeda = $item->lokasi_lama_id != $item->lokasi_baru_id; @endphp
                    <tr class="hover:bg-slate-50/50">
                        <td class="py-3.5 px-5 font-bold text-slate-700 flex items-center justify-between">
                            <span>Lokasi Cabang / Kantor</span>
                            @if($isLokasiBeda)
                            <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">Berubah</span>
                            @endif
                        </td>
                        <td class="py-3.5 px-5 bg-slate-50/40 text-slate-600">
                            <span class="flex items-center gap-1.5 font-medium">
                                <i data-lucide="map-pin" class="w-3.5 h-3.5 text-slate-400"></i>
                                {{ $item->lokasiLama->nama_lokasi ?? '-' }}
                            </span>
                        </td>
                        <td class="py-3.5 px-5 bg-primary-50/20 {{ $isLokasiBeda ? 'text-primary-800 font-bold' : 'text-slate-700 font-medium' }}">
                            <span class="flex items-center gap-1.5">
                                <i data-lucide="map-pin" class="w-3.5 h-3.5 text-primary-500"></i>
                                {{ $item->lokasiBaru->nama_lokasi ?? '-' }}
                            </span>
                        </td>
                    </tr>

                    <!-- 5. Atasan Langsung -->
                    @php $isAtasanBeda = $item->atasan_lama_id != $item->atasan_baru_id; @endphp
                    <tr class="hover:bg-slate-50/50">
                        <td class="py-3.5 px-5 font-bold text-slate-700 flex items-center justify-between">
                            <span>Atasan Langsung</span>
                            @if($isAtasanBeda)
                            <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">Berubah</span>
                            @endif
                        </td>
                        <td class="py-3.5 px-5 bg-slate-50/40 text-slate-600">
                            {{ $item->atasanLama->nama_lengkap ?? 'Tidak Ada' }}
                        </td>
                        <td class="py-3.5 px-5 bg-primary-50/20 {{ $isAtasanBeda ? 'text-primary-800 font-bold' : 'text-slate-700 font-medium' }}">
                            {{ $item->atasanBaru->nama_lengkap ?? 'Tidak Ada' }}
                        </td>
                    </tr>

                    <!-- 6. Gaji Pokok -->
                    @php 
                        $isGajiBeda = $item->gaji_pokok_lama != $item->gaji_pokok_baru && $item->gaji_pokok_baru > 0;
                        $selisihGaji = ($item->gaji_pokok_baru ?? 0) - ($item->gaji_pokok_lama ?? 0);
                    @endphp
                    <tr class="hover:bg-slate-50/50">
                        <td class="py-3.5 px-5 font-bold text-slate-700 flex items-center justify-between">
                            <span>Gaji Pokok</span>
                            @if($isGajiBeda)
                            <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">Penyesuaian</span>
                            @endif
                        </td>
                        <td class="py-3.5 px-5 bg-slate-50/40 font-mono text-slate-600 font-medium">
                            Rp {{ number_format($item->gaji_pokok_lama ?? 0, 0, ',', '.') }}
                        </td>
                        <td class="py-3.5 px-5 bg-primary-50/20 font-mono font-bold {{ $isGajiBeda ? 'text-emerald-700' : 'text-slate-700' }}">
                            Rp {{ number_format($item->gaji_pokok_baru ?? $item->gaji_pokok_lama ?? 0, 0, ',', '.') }}
                            @if($isGajiBeda && $selisihGaji > 0)
                            <span class="text-[10px] font-bold text-emerald-600 ml-1.5">(+ Rp {{ number_format($selisihGaji, 0, ',', '.') }})</span>
                            @endif
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Catatan Pertimbangan Usulan -->
    @if($item->catatan)
    <div class="p-5 rounded-3xl bg-white border border-slate-200/80 shadow-sm space-y-1.5">
        <h4 class="font-bold text-slate-900 text-xs flex items-center gap-1.5">
            <i data-lucide="message-square" class="w-4 h-4 text-slate-500"></i>
            <span>Catatan / Dasar Pertimbangan Usulan</span>
        </h4>
        <p class="text-xs text-slate-600 leading-relaxed pl-5 whitespace-pre-line">{{ $item->catatan }}</p>
    </div>
    @endif

    <!-- Riwayat Perubahan Karir Pegawai Ini Sebelumnya -->
    <div class="rounded-3xl bg-white border border-slate-200/80 shadow-sm p-6 space-y-4">
        <div class="flex items-center justify-between border-b border-slate-100 pb-3">
            <div>
                <h3 class="font-bold text-slate-900 text-sm">Riwayat Mutasi & Promosi Pegawai Ini Sebelumnya</h3>
                <p class="text-xs text-slate-500 mt-0.5">Timeline catatan jejak karir selama bertugas di perusahaan</p>
            </div>
            <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-slate-100 text-slate-600">
                {{ $riwayatSebelumnya->count() }} Peristiwa
            </span>
        </div>

        @if($riwayatSebelumnya->count() > 0)
        <div class="space-y-3">
            @foreach($riwayatSebelumnya as $prev)
            <div class="p-3.5 rounded-2xl bg-slate-50/70 border border-slate-200/60 flex items-center justify-between text-xs">
                <div class="flex items-center gap-3">
                    <span class="p-2 rounded-xl bg-white border border-slate-200 font-bold text-slate-700">
                        <i data-lucide="{{ $prev->jenis_perubahan == 'promosi' ? 'trending-up' : 'arrow-left-right' }}" class="w-4 h-4 text-slate-600"></i>
                    </span>
                    <div>
                        <div class="flex items-center gap-2">
                            <span class="font-bold text-slate-800 capitalize">{{ $prev->jenis_perubahan }}:</span>
                            <span class="text-slate-600">{{ $prev->jabatanLama->nama_jabatan ?? '-' }}</span>
                            <i data-lucide="arrow-right" class="w-3 h-3 text-slate-400"></i>
                            <span class="font-bold text-primary-700">{{ $prev->jabatanBaru->nama_jabatan ?? '-' }}</span>
                        </div>
                        <span class="text-[11px] text-slate-400">
                            Efektif: {{ $prev->tanggal_efektif ? $prev->tanggal_efektif->format('d/m/Y') : '-' }} • SK: {{ $prev->nomor_sk ?: '-' }}
                        </span>
                    </div>
                </div>
                <div>
                    <a href="{{ route('admin.mutasi-promosi.show', $prev->id) }}" class="text-primary-600 hover:text-primary-700 font-bold text-xs">
                        Lihat Detail
                    </a>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <p class="text-xs text-slate-400 py-3 text-center">Belum ada riwayat mutasi atau promosi lain sebelum ini untuk pegawai ini.</p>
        @endif
    </div>
</div>

<!-- Modal Tolak Usulan -->
<div id="modalTolakUsulan" 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-3xl max-w-md w-full p-6 shadow-2xl space-y-4 animate-in fade-in zoom-in-95 duration-150">
        <div class="flex items-center justify-between pb-2 border-b border-slate-100">
            <h3 class="font-bold text-slate-900 text-sm flex items-center gap-2 text-rose-700">
                <i data-lucide="x-circle" class="w-5 h-5"></i>
                <span>Tolak Usulan Mutasi / Promosi</span>
            </h3>
            <button onclick="document.getElementById('modalTolakUsulan').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.mutasi-promosi.reject', $item->id) }}" method="POST" class="space-y-4 text-xs">
            @csrf
            <div>
                <label class="block font-bold text-slate-700 mb-1">Alasan Penolakan *</label>
                <textarea name="alasan_penolakan" rows="3" required placeholder="Tuliskan pertimbangan atau alasan usulan ini ditolak..." class="w-full px-3 py-2 rounded-xl border border-slate-200 outline-none focus:ring-2 focus:ring-rose-500"></textarea>
            </div>
            <div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-100">
                <button type="button" onclick="document.getElementById('modalTolakUsulan').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-rose-600 hover:bg-rose-700 text-white font-bold transition-colors">
                    Tolak Usulan Ini
                </button>
            </div>
        </form>
    </div>
</div>
@endsection