@extends('layouts.admin')

@section('title', 'Pengaturan Alur Approval')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-xl bg-primary-50 text-primary-600 flex items-center justify-center font-bold">
                    <i data-lucide="check-check" class="w-5 h-5"></i>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-slate-900 tracking-tight">Konfigurasi Alur Approval</h1>
                    <p class="text-xs text-slate-500 mt-0.5">Atur alur persetujuan bertingkat (multi-tier) oleh karyawan via mobile atau gunakan persetujuan langsung admin</p>
                </div>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-100 text-slate-700 text-xs font-semibold">
                <i data-lucide="layers" class="w-3.5 h-3.5 text-slate-500"></i>
                <span>{{ $alurs->count() }} Modul Layanan</span>
            </span>
        </div>
    </div>

    <!-- Alert Success / Error -->
    @if(session('success'))
    <div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 text-xs font-semibold flex items-center justify-between shadow-sm">
        <div class="flex items-center gap-2.5">
            <i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-600 shrink-0"></i>
            <span>{{ session('success') }}</span>
        </div>
        <button onclick="this.parentElement.remove()" class="text-emerald-500 hover:text-emerald-700">
            <i data-lucide="x" class="w-4 h-4"></i>
        </button>
    </div>
    @endif

    @if($errors->any())
    <div class="p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-800 text-xs font-semibold shadow-sm">
        <div class="flex items-center gap-2 mb-1.5">
            <i data-lucide="alert-circle" class="w-4 h-4 text-rose-600 shrink-0"></i>
            <span>Terjadi kesalahan penginputan:</span>
        </div>
        <ul class="list-disc list-inside space-y-0.5 text-[11px] text-rose-700 pl-4">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <!-- Information Card -->
    <div class="p-5 rounded-2xl bg-gradient-to-r from-blue-900 via-indigo-900 to-slate-900 text-white shadow-xl shadow-indigo-950/20 relative overflow-hidden">
        <div class="absolute -right-10 -bottom-10 w-44 h-44 bg-blue-500/10 rounded-full blur-2xl pointer-events-none"></div>
        <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 relative z-10">
            <div class="space-y-1.5 max-w-2xl">
                <div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-white/10 text-blue-200 text-[10px] font-bold tracking-wider uppercase">
                    <i data-lucide="shield-check" class="w-3.5 h-3.5"></i>
                    <span>Fleksibilitas Alur Persetujuan</span>
                </div>
                <h2 class="text-base font-bold text-white tracking-tight">Aturan Multi-Tier vs Approval Admin</h2>
                <p class="text-xs text-blue-100/80 leading-relaxed">
                    Setiap modul (Izin, Cuti, Lembur, Kunjungan Dinas, Reimbursement) dapat diatur apakah menggunakan <strong>Approval Bertingkat</strong> (disetujui berurutan oleh karyawan ditugaskan melalui Mobile App) atau <strong>Approval Langsung Admin</strong>. Jumlah approver bertingkat tidak terbatas sesuai kebutuhan instansi Anda.
                </p>
            </div>
            <div class="flex flex-col gap-2 shrink-0">
                <div class="flex items-center gap-2 text-xs bg-white/10 backdrop-blur-md px-3.5 py-2 rounded-xl border border-white/10">
                    <span class="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-pulse"></span>
                    <span class="text-white font-medium">Mobile Approval Siap Digunakan</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Modul Tabs Navigation -->
    <div class="flex items-center gap-2 overflow-x-auto pb-2 border-b border-slate-200/80 text-xs font-semibold">
        @foreach($alurs as $index => $alur)
        <button type="button" 
                onclick="switchTab('tab-{{ $alur->modul }}')" 
                id="btn-tab-{{ $alur->modul }}" 
                class="tab-btn px-4 py-2.5 rounded-xl transition-all flex items-center gap-2.5 {{ $index === 0 ? 'bg-primary-600 text-white shadow-sm shadow-primary-600/30 font-bold' : 'bg-white text-slate-600 hover:bg-slate-100 border border-slate-200/60' }}">
            <i data-lucide="{{ match($alur->modul) {
                'izin' => 'file-text',
                'cuti' => 'calendar-off',
                'lembur' => 'clock-4',
                'dinas' => 'briefcase',
                'reimbursement' => 'receipt',
                default => 'check-circle'
            } }}" class="w-4 h-4"></i>
            <span>{{ $alur->label_modul }}</span>
            @if($alur->is_bertingkat)
                <span class="px-1.5 py-0.5 rounded-md text-[10px] bg-emerald-500/20 text-emerald-100 border border-emerald-400/30">
                    {{ $alur->steps->count() }} Step
                </span>
            @else
                <span class="px-1.5 py-0.5 rounded-md text-[10px] {{ $index === 0 ? 'bg-white/20 text-white' : 'bg-slate-200 text-slate-600' }}">
                    Admin
                </span>
            @endif
        </button>
        @endforeach
    </div>

    <!-- Modul Content Sections -->
    <div class="space-y-6">
        @foreach($alurs as $index => $alur)
        <div id="tab-{{ $alur->modul }}" class="tab-content {{ $index === 0 ? '' : 'hidden' }} space-y-6">
            
            <!-- Card Pengaturan Utama Modul -->
            <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm p-6 space-y-6">
                <!-- Header Card & Status Switch -->
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 pb-6 border-b border-slate-100">
                    <div class="flex items-start gap-3.5">
                        <div class="w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 {{ match($alur->modul) {
                            'izin' => 'bg-amber-50 text-amber-600 border border-amber-200/60',
                            'cuti' => 'bg-sky-50 text-sky-600 border border-sky-200/60',
                            'lembur' => 'bg-indigo-50 text-indigo-600 border border-indigo-200/60',
                            'dinas' => 'bg-emerald-50 text-emerald-600 border border-emerald-200/60',
                            'reimbursement' => 'bg-teal-50 text-teal-600 border border-teal-200/60',
                            default => 'bg-slate-50 text-slate-600'
                        } }}">
                            <i data-lucide="{{ match($alur->modul) {
                                'izin' => 'file-text',
                                'cuti' => 'calendar-off',
                                'lembur' => 'clock-4',
                                'dinas' => 'briefcase',
                                'reimbursement' => 'receipt',
                                default => 'check-circle'
                            } }}" class="w-6 h-6"></i>
                        </div>
                        <div>
                            <div class="flex items-center gap-2">
                                <h3 class="text-lg font-bold text-slate-900">{{ $alur->label_modul }}</h3>
                                @if($alur->is_bertingkat)
                                    <span class="px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200 flex items-center gap-1">
                                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                                        Bertingkat Aktif
                                    </span>
                                @else
                                    <span class="px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-slate-100 text-slate-600 border border-slate-200 flex items-center gap-1">
                                        <span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
                                        Approval Admin Tunggal
                                    </span>
                                @endif
                            </div>
                            <p class="text-xs text-slate-500 mt-1">{{ $alur->deskripsi ?: 'Pengaturan alur persetujuan untuk pengajuan modul ' . $alur->label_modul }}</p>
                        </div>
                    </div>

                    <!-- TOGGLE SWITCH OPSI FITUR BERTINGKAT -->
                    <div class="flex items-center gap-4 bg-slate-50/80 p-3.5 rounded-2xl border border-slate-200/80">
                        <div class="text-right">
                            <span class="block text-xs font-bold text-slate-800">Gunakan Approval Bertingkat</span>
                            <span class="block text-[11px] text-slate-500">
                                {{ $alur->is_bertingkat ? 'Disetujui karyawan via Mobile App' : 'Nonaktif (Langsung Approval Admin)' }}
                            </span>
                        </div>
                        <form action="{{ route('admin.pengaturan-approval.toggle', $alur->id) }}" method="POST">
                            @csrf
                            <button type="submit" 
                                    class="relative inline-flex h-7 w-14 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none {{ $alur->is_bertingkat ? 'bg-primary-600' : 'bg-slate-300' }}"
                                    title="Klik untuk mengubah mode approval">
                                <span class="sr-only">Toggle approval bertingkat</span>
                                <span class="pointer-events-none inline-block h-6 w-6 transform rounded-full bg-white shadow-md ring-0 transition duration-200 ease-in-out {{ $alur->is_bertingkat ? 'translate-x-7' : 'translate-x-0' }}"></span>
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Bagian Detail Alur Persetujuan -->
                @if($alur->is_bertingkat)
                <div class="space-y-5">
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                        <div>
                            <h4 class="text-sm font-bold text-slate-900">Rangkaian Tahapan Approver (Workflow Pipeline)</h4>
                            <p class="text-xs text-slate-500">Pengajuan akan dikirimkan berurutan mulai dari Step 1 hingga step terakhir secara berjenjang.</p>
                        </div>
                        <button type="button" 
                                onclick="openModalTambahStep('{{ $alur->id }}', '{{ $alur->label_modul }}')"
                                class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold shadow-sm shadow-primary-500/20 transition-all">
                            <i data-lucide="plus" class="w-4 h-4"></i>
                            <span>Tambah Tahapan (Step)</span>
                        </button>
                    </div>

                    <!-- Pipeline Stepper Visualizer -->
                    @if($alur->steps->isEmpty())
                    <div class="p-8 text-center rounded-2xl border-2 border-dashed border-amber-200 bg-amber-50/50 space-y-3">
                        <div class="w-12 h-12 rounded-2xl bg-amber-100 text-amber-700 flex items-center justify-center mx-auto">
                            <i data-lucide="alert-triangle" class="w-6 h-6"></i>
                        </div>
                        <div class="max-w-md mx-auto">
                            <p class="text-sm font-bold text-amber-900">Belum Ada Approver yang Ditetapkan</p>
                            <p class="text-xs text-amber-700 mt-1">Approval bertingkat aktif, namun belum ada tahapan karyawan approver. Silakan tambahkan minimal 1 karyawan approver agar alur dapat berjalan di mobile.</p>
                        </div>
                        <button type="button" 
                                onclick="openModalTambahStep('{{ $alur->id }}', '{{ $alur->label_modul }}')"
                                class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-amber-600 hover:bg-amber-700 text-white text-xs font-bold transition-all shadow-sm">
                            <i data-lucide="plus" class="w-4 h-4"></i>
                            <span>Tambahkan Approver Pertama</span>
                        </button>
                    </div>
                    @else
                    <div class="space-y-4">
                        <!-- Step Cards List -->
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            @foreach($alur->steps as $step)
                            <div class="p-4 rounded-2xl bg-slate-50 border border-slate-200/80 hover:border-primary-300 hover:shadow-md transition-all relative group flex flex-col justify-between">
                                <div class="space-y-3">
                                    <!-- Step Header Badge & Delete Button -->
                                    <div class="flex items-center justify-between">
                                        <div class="flex items-center gap-2">
                                            <span class="w-6 h-6 rounded-lg bg-primary-600 text-white text-[11px] font-bold flex items-center justify-center shadow-sm">
                                                {{ $step->step_ke }}
                                            </span>
                                            <span class="text-xs font-bold text-slate-800">{{ $step->label_approver ?: "Approver {$step->step_ke}" }}</span>
                                        </div>
                                        <form action="{{ route('admin.pengaturan-approval.step.destroy', $step->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus tahapan 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 Tahapan Ini">
                                                <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                                            </button>
                                        </form>
                                    </div>

                                    <!-- Info Pegawai Approver -->
                                    <div class="flex items-center gap-3 pt-1">
                                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-500 to-indigo-600 text-white flex items-center justify-center font-bold text-xs shrink-0 shadow-sm">
                                            {{ strtoupper(substr($step->pegawai?->nama_lengkap ?? '?', 0, 2)) }}
                                        </div>
                                        <div class="min-w-0 flex-1">
                                            <p class="text-xs font-bold text-slate-900 truncate">{{ $step->pegawai?->nama_lengkap ?? 'Pegawai tidak ditemukan' }}</p>
                                            <p class="text-[11px] text-slate-500 truncate">{{ $step->pegawai?->jabatan?->nama_jabatan ?? 'Jabatan -' }}</p>
                                            <p class="text-[10px] text-slate-400 truncate">{{ $step->pegawai?->departemen?->nama_departemen ?? 'Dept -' }} • NIP: {{ $step->pegawai?->nip ?? '-' }}</p>
                                        </div>
                                    </div>

                                    @if($step->keterangan)
                                    <p class="text-[11px] text-slate-500 bg-white p-2 rounded-xl border border-slate-100 italic">
                                        "{{ $step->keterangan }}"
                                    </p>
                                    @endif
                                </div>

                                <div class="mt-3 pt-3 border-t border-slate-200/60 flex items-center justify-between text-[10px] text-slate-400">
                                    <span>Persetujuan via Mobile</span>
                                    <span class="font-semibold text-primary-600">Urutan #{{ $step->step_ke }}</span>
                                </div>
                            </div>
                            @endforeach

                            <!-- Card Add Next Step Placeholder -->
                            <button type="button" 
                                    onclick="openModalTambahStep('{{ $alur->id }}', '{{ $alur->label_modul }}')"
                                    class="p-5 rounded-2xl border-2 border-dashed border-slate-200 hover:border-primary-400 hover:bg-primary-50/20 transition-all flex flex-col items-center justify-center text-center gap-2 group min-h-[140px]">
                                <div class="w-10 h-10 rounded-xl bg-slate-100 group-hover:bg-primary-100 text-slate-400 group-hover:text-primary-600 flex items-center justify-center transition-colors">
                                    <i data-lucide="plus" class="w-5 h-5"></i>
                                </div>
                                <div>
                                    <span class="block text-xs font-bold text-slate-700 group-hover:text-primary-700">Tambah Tahapan Berikutnya</span>
                                    <span class="block text-[10px] text-slate-400">Karyawan approval ke-{{ $alur->steps->count() + 1 }}</span>
                                </div>
                            </button>
                        </div>

                        <!-- Visual Flow Chart Preview -->
                        <div class="mt-6 p-4 rounded-2xl bg-slate-50/80 border border-slate-200/60">
                            <p class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-3">Diagram Alur Pengajuan:</p>
                            <div class="flex items-center gap-2 overflow-x-auto pb-2">
                                <div class="px-3 py-1.5 rounded-xl bg-white border border-slate-200 text-slate-700 text-xs font-semibold shrink-0 shadow-xs flex items-center gap-2">
                                    <i data-lucide="user" class="w-3.5 h-3.5 text-slate-400"></i>
                                    <span>Pemohon Mengajukan</span>
                                </div>
                                @foreach($alur->steps as $s)
                                <i data-lucide="arrow-right" class="w-4 h-4 text-slate-400 shrink-0"></i>
                                <div class="px-3 py-1.5 rounded-xl bg-primary-50 border border-primary-200 text-primary-700 text-xs font-bold shrink-0 shadow-xs flex items-center gap-2">
                                    <span class="w-4 h-4 rounded-full bg-primary-600 text-white text-[9px] flex items-center justify-center">{{ $s->step_ke }}</span>
                                    <span>{{ $s->pegawai?->nama_lengkap ?: 'Approver' }} ({{ $s->label_approver }})</span>
                                </div>
                                @endforeach
                                <i data-lucide="arrow-right" class="w-4 h-4 text-slate-400 shrink-0"></i>
                                <div class="px-3 py-1.5 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-bold shrink-0 shadow-xs flex items-center gap-2">
                                    <i data-lucide="check-circle" class="w-3.5 h-3.5 text-emerald-600"></i>
                                    <span>Selesai Disetujui Penuh</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
                @else
                <!-- Tampilan Saat Approval Bertingkat NONAKTIF -->
                <div class="p-6 rounded-2xl bg-slate-50 border border-slate-200/80 space-y-4">
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 rounded-xl bg-slate-200 text-slate-600 flex items-center justify-center shrink-0">
                            <i data-lucide="info" class="w-5 h-5"></i>
                        </div>
                        <div>
                            <h4 class="text-sm font-bold text-slate-800">Mode Persetujuan Langsung Admin Aktif</h4>
                            <p class="text-xs text-slate-600 mt-1 leading-relaxed">
                                Pada mode ini, setiap pengajuan <strong>{{ $alur->label_modul }}</strong> yang dikirim dari aplikasi mobile <strong>tidak memerlukan persetujuan bertingkat oleh karyawan</strong>. Pengajuan akan langsung masuk ke menu <strong>Laporan & Presensi > {{ $alur->label_modul }}</strong> di panel admin untuk disetujui langsung oleh Admin / HRD.
                            </p>
                        </div>
                    </div>

                    <div class="p-4 rounded-xl bg-white border border-slate-200/60 flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="w-2.5 h-2.5 rounded-full bg-amber-500"></div>
                            <span class="text-xs font-semibold text-slate-700">Ingin menggunakan alur berjenjang (Karyawan A $\rightarrow$ Karyawan B)?</span>
                        </div>
                        <form action="{{ route('admin.pengaturan-approval.toggle', $alur->id) }}" method="POST">
                            @csrf
                            <button type="submit" class="px-3.5 py-1.5 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold transition-all shadow-sm">
                                Aktifkan Approval Bertingkat
                            </button>
                        </form>
                    </div>
                </div>
                @endif
            </div>
        </div>
        @endforeach
    </div>
</div>

<!-- MODAL TAMBAH STEP APPROVER -->
<div id="modalTambahStep" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl max-w-lg w-full overflow-hidden border border-slate-200 animate-in fade-in zoom-in-95 duration-200">
        <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
            <div>
                <h3 class="text-sm font-bold text-slate-900">Tambah Tahapan Approver</h3>
                <p id="modalModulSubtitle" class="text-xs text-slate-500 mt-0.5">Pilih karyawan yang bertugas memberikan persetujuan</p>
            </div>
            <button type="button" onclick="closeModalTambahStep()" class="p-1 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        <form id="formTambahStep" method="POST" action="">
            @csrf
            <div class="p-6 space-y-4">
                <!-- Pegawai Approver Select -->
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">
                        Pilih Karyawan Approver <span class="text-rose-500">*</span>
                    </label>
                    <select name="pegawai_id" id="selectPegawai" required class="w-full text-xs rounded-xl border-slate-200 focus:border-primary-500 focus:ring-primary-500 py-2.5 px-3">
                        <option value="">-- Pilih Karyawan --</option>
                        @foreach($pegawais as $p)
                        <option value="{{ $p->id }}" data-jabatan="{{ $p->jabatan?->nama_jabatan }}">
                            {{ $p->nama_lengkap }} ({{ $p->jabatan?->nama_jabatan ?? 'Staf' }} - {{ $p->departemen?->nama_departemen ?? '-' }})
                        </option>
                        @endforeach
                    </select>
                    <p class="text-[11px] text-slate-400 mt-1">Karyawan ini akan menerima notifikasi dan menu persetujuan di aplikasi Mobile Absensi.</p>
                </div>

                <!-- Label Peran Approver -->
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">
                        Label / Peran Tahapan <span class="text-slate-400 font-normal">(Opsional)</span>
                    </label>
                    <input type="text" 
                           name="label_approver" 
                           id="inputLabelApprover" 
                           placeholder="Contoh: Atasan Langsung, Kepala Divisi, HRD Manager" 
                           class="w-full text-xs rounded-xl border-slate-200 focus:border-primary-500 focus:ring-primary-500 py-2 px-3">
                    <p class="text-[11px] text-slate-400 mt-1">Label yang muncul pada progress bar pengajuan pegawai.</p>
                </div>

                <!-- Keterangan -->
                <div>
                    <label class="block text-xs font-bold text-slate-700 mb-1.5">
                        Keterangan Tambahan <span class="text-slate-400 font-normal">(Opsional)</span>
                    </label>
                    <textarea name="keterangan" 
                              rows="2" 
                              placeholder="Catatan mengenai batasan atau wewenang tahapan ini" 
                              class="w-full text-xs rounded-xl border-slate-200 focus:border-primary-500 focus:ring-primary-500 py-2 px-3"></textarea>
                </div>
            </div>

            <div class="px-6 py-4 bg-slate-50 border-t border-slate-100 flex items-center justify-end gap-2.5">
                <button type="button" onclick="closeModalTambahStep()" class="px-4 py-2 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-100 text-xs font-semibold">
                    Batal
                </button>
                <button type="submit" class="px-4 py-2 rounded-xl bg-primary-600 hover:bg-primary-700 text-white text-xs font-bold shadow-sm shadow-primary-500/20">
                    Simpan Tahapan
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    function switchTab(tabId) {
        document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('bg-primary-600', 'text-white', 'shadow-sm', 'shadow-primary-600/30', 'font-bold');
            btn.classList.add('bg-white', 'text-slate-600', 'border', 'border-slate-200/60');
        });

        const activeContent = document.getElementById(tabId);
        if (activeContent) activeContent.classList.remove('hidden');

        const modulName = tabId.replace('tab-', '');
        const activeBtn = document.getElementById('btn-' + tabId);
        if (activeBtn) {
            activeBtn.classList.remove('bg-white', 'text-slate-600', 'border', 'border-slate-200/60');
            activeBtn.classList.add('bg-primary-600', 'text-white', 'shadow-sm', 'shadow-primary-600/30', 'font-bold');
        }
    }

    function openModalTambahStep(alurId, labelModul) {
        const form = document.getElementById('formTambahStep');
        form.action = `/admin/pengaturan-approval/${alurId}/step`;
        document.getElementById('modalModulSubtitle').textContent = `Menambahkan tahapan persetujuan untuk modul: ${labelModul}`;
        document.getElementById('modalTambahStep').classList.remove('hidden');
    }

    function closeModalTambahStep() {
        document.getElementById('modalTambahStep').classList.add('hidden');
    }

    // Auto-fill label approver ketika jabatan dipilih
    document.getElementById('selectPegawai')?.addEventListener('change', function() {
        const opt = this.options[this.selectedIndex];
        const jabatan = opt.getAttribute('data-jabatan');
        const inputLabel = document.getElementById('inputLabelApprover');
        if (jabatan && (!inputLabel.value || inputLabel.dataset.autofilled === 'true')) {
            inputLabel.value = jabatan;
            inputLabel.dataset.autofilled = 'true';
        }
    });

    document.getElementById('inputLabelApprover')?.addEventListener('input', function() {
        this.dataset.autofilled = 'false';
    });
</script>
@endpush
@endsection