@extends('layout.appdas')

@section('title', 'Data Pelamar')

@section('content')
{{-- MASTER CARD: DATA PELAMAR --}}
<div class="card table-card mb-0 shadow-sm border-0 rounded-0 overflow-hidden">
    <div class="card-header bg-white border-bottom py-3 px-4">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
            <div>
                <h5 class="mb-1 fw-bold text-dark d-inline-flex align-items-center">
                    <i class="bi bi-person-badge text-primary me-2 fs-5 align-middle"></i>
                    <span>Data Pelamar</span>
                </h5>
                <p class="text-muted mb-0 small">
                    Kelola data pelamar kerja Dosen, Tenaga Kependidikan & Staf Universitas Sari Mutiara Indonesia secara sinkron.
                </p>
            </div>
            <div class="d-flex gap-2 flex-wrap align-items-center">
                {{-- FITUR PENDAFTARAN & FORM PUBLIK DISEMBUNYIKAN KARENA TIDAK DIGUNAKAN SAAT INI --}}
                {{--
                @if(isset($settingRekrutmen) && $settingRekrutmen->is_open)
                    <button type="button" class="btn btn-outline-success btn-sm px-3 shadow-xs rounded-2 d-inline-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#modalPengaturanRekrutmen" title="Portal Pendaftaran Sedang Buka. Klik untuk ubah/tutup.">
                        <span class="spinner-grow spinner-grow-sm text-success" style="width: 8px; height: 8px;" role="status"></span>
                        <span class="fw-bold fs-8">Pendaftaran: BUKA</span>
                        <i class="bi bi-gear-fill ms-1 text-muted fs-8"></i>
                    </button>
                @else
                    <button type="button" class="btn btn-outline-danger btn-sm px-3 shadow-xs rounded-2 d-inline-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#modalPengaturanRekrutmen" title="Portal Pendaftaran Sedang Ditutup. Klik untuk buka.">
                        <i class="bi bi-lock-fill text-danger fs-7"></i>
                        <span class="fw-bold fs-8">Pendaftaran: DITUTUP</span>
                        <i class="bi bi-gear-fill ms-1 text-muted fs-8"></i>
                    </button>
                @endif

                <a href="{{ route('pendaftaran.form') }}" target="_blank" class="btn btn-outline-primary btn-sm px-3 shadow-xs rounded-2" title="Buka Portal Pendaftaran Online Pelamar">
                    <i class="bi bi-globe me-1"></i> Form Publik Pelamar
                </a>
                --}}
                <button class="btn btn-outline-dark btn-sm px-3 shadow-xs rounded-2" data-bs-toggle="modal" data-bs-target="#modalKelolaKategori">
                    <i class="bi bi-tags me-1"></i> Master Kategori Posisi
                </button>
            </div>
        </div>

        {{-- BARIS AKSI UTAMA: TOMBOL INPUT MANUAL & EXCEL DI SEBELAH KIRI --}}
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 pt-2 border-top">
            <div class="d-flex gap-2 flex-wrap align-items-center">
                <button class="btn btn-primary btn-sm px-3 shadow-sm rounded-2 fw-semibold" data-bs-toggle="modal" data-bs-target="#modalTambahPelamar">
                    <i class="bi bi-plus-lg me-1"></i> Input Pelamar Manual
                </button>
                <a href="{{ route('arsip-lamaran.export', request()->query()) }}" class="btn btn-success btn-sm px-3 shadow-sm rounded-2 fw-semibold">
                    <i class="bi bi-file-earmark-excel me-1"></i> Ekspor Excel
                </a>
            </div>
            <div class="d-flex align-items-center gap-2 flex-wrap">
                @if(($pelamarBaruCount ?? 0) > 0)
                    <a href="{{ request()->has('hanya_baru') ? route('arsip-lamaran.index') : route('arsip-lamaran.index', ['hanya_baru' => 1]) }}" 
                       class="badge {{ request('hanya_baru') ? 'bg-danger text-white' : 'bg-danger-subtle text-danger border border-danger-subtle' }} text-decoration-none px-2.5 py-1.5 rounded-pill fs-8 fw-semibold d-inline-flex align-items-center gap-1 shadow-xs"
                       title="{{ request('hanya_baru') ? 'Tampilkan Semua Data' : 'Filter Hanya Berkas Baru Belum Ditinjau' }}">
                        <i class="bi bi-bell-fill"></i>
                        <span>{{ $pelamarBaruCount }} Berkas Baru</span>
                        @if(request('hanya_baru'))
                            <i class="bi bi-x ms-1"></i>
                        @endif
                    </a>
                @endif
                <div class="text-muted fs-8">
                    <i class="bi bi-database me-1 text-primary"></i> Total <strong>{{ $totalPelamar ?? 0 }}</strong> data pelamar terarsip
                </div>
            </div>
        </div>
    </div>

    <div class="card-body p-4 d-flex flex-column">
        {{-- REKAP STATISTIK DINAMIS --}}
        <div class="row g-3 mb-4">
            <div class="col-6 col-md-3">
                <div class="border rounded-3 p-3 h-100 bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1">Total Pelamar</small>
                            <h3 class="fw-bold mb-0 text-dark">{{ $totalPelamar ?? 0 }}</h3>
                            <small class="text-secondary fs-8">Semua Periode</small>
                        </div>
                        <div class="stat-icon bg-primary bg-opacity-10 p-2 rounded-3 text-primary">
                            <i class="bi bi-people-fill fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="border rounded-3 p-3 h-100 bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1">Pelamar Bulan Ini</small>
                            <h3 class="fw-bold mb-0 text-info">{{ $pelamarBulanIni ?? 0 }}</h3>
                            <small class="text-info fw-semibold fs-8">{{ \Carbon\Carbon::now()->translatedFormat('F Y') }}</small>
                        </div>
                        <div class="stat-icon bg-info bg-opacity-10 p-2 rounded-3 text-info">
                            <i class="bi bi-calendar2-check-fill fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="border rounded-3 p-3 h-100 bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1">Pelamar Ditolak</small>
                            <h3 class="fw-bold mb-0 text-danger">{{ $pelamarDitolak ?? 0 }}</h3>
                            <small class="text-danger fw-semibold fs-8">Tidak Lolos Seleksi</small>
                        </div>
                        <div class="stat-icon bg-danger bg-opacity-10 p-2 rounded-3 text-danger">
                            <i class="bi bi-person-x-fill fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="border rounded-3 p-3 h-100 bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block mb-1">Diterima / Lolos</small>
                            <h3 class="fw-bold mb-0 text-success">{{ $pelamarDiterima ?? 0 }}</h3>
                            <small class="text-success fw-semibold fs-8">Lolos Jadi Pegawai</small>
                        </div>
                        <div class="stat-icon bg-success bg-opacity-10 p-2 rounded-3 text-success">
                            <i class="bi bi-check-circle-fill fs-4"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- FORM FILTER & PENCARIAN TERPADU --}}
        <form action="{{ route('arsip-lamaran.index') }}" method="GET" class="row g-2 mb-4 bg-light p-3 rounded-3 border align-items-center">
            <div class="col-md-3">
                <input type="text" name="search" value="{{ request('search') }}" class="form-control form-control-sm" placeholder="Cari nama, nomor surat, NIK, posisi...">
            </div>
            <div class="col-md-2">
                <select name="kategori_pelamar_id" class="form-select form-select-sm">
                    <option value="">-- Semua Kategori --</option>
                    @foreach($kategoriList as $kat)
                        <option value="{{ $kat->id }}" {{ request('kategori_pelamar_id') == $kat->id ? 'selected' : '' }}>
                            {{ $kat->nama_kategori }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select name="pendidikan_terakhir" class="form-select form-select-sm">
                    <option value="">-- Semua Pendidikan --</option>
                    <option value="SMA/SMK" {{ request('pendidikan_terakhir') == 'SMA/SMK' ? 'selected' : '' }}>SMA/SMK</option>
                    <option value="D3" {{ request('pendidikan_terakhir') == 'D3' ? 'selected' : '' }}>D3</option>
                    <option value="D4" {{ request('pendidikan_terakhir') == 'D4' ? 'selected' : '' }}>D4</option>
                    <option value="S1" {{ request('pendidikan_terakhir') == 'S1' ? 'selected' : '' }}>S1</option>
                    <option value="S2" {{ request('pendidikan_terakhir') == 'S2' ? 'selected' : '' }}>S2</option>
                    <option value="S3" {{ request('pendidikan_terakhir') == 'S3' ? 'selected' : '' }}>S3</option>
                </select>
            </div>
            <div class="col-md-2">
                <select name="status_lamaran" class="form-select form-select-sm">
                    <option value="">-- Semua Status --</option>
                    <option value="Berkas Masuk" {{ request('status_lamaran') == 'Berkas Masuk' ? 'selected' : '' }}>Berkas Masuk</option>
                    <option value="Seleksi Administrasi" {{ request('status_lamaran') == 'Seleksi Administrasi' ? 'selected' : '' }}>Seleksi Administrasi</option>
                    <option value="Wawancara" {{ request('status_lamaran') == 'Wawancara' ? 'selected' : '' }}>Wawancara</option>
                    <option value="Diterima" {{ request('status_lamaran') == 'Diterima' ? 'selected' : '' }}>Diterima</option>
                    <option value="Ditolak" {{ request('status_lamaran') == 'Ditolak' ? 'selected' : '' }}>Ditolak</option>
                    <option value="Diarsipkan" {{ request('status_lamaran') == 'Diarsipkan' ? 'selected' : '' }}>Diarsipkan</option>
                </select>
            </div>
            <div class="col-md-3 d-flex gap-1">
                <button type="submit" class="btn btn-primary btn-sm w-100 rounded-2">
                    <i class="bi bi-filter me-1"></i> Filter
                </button>
                <a href="{{ route('arsip-lamaran.index') }}" class="btn btn-light border btn-sm px-3 d-flex align-items-center justify-content-center gap-1" title="Reset Filter">
                    <i class="bi bi-arrow-counterclockwise"></i> Reset
                </a>
            </div>
        </form>

        {{-- TABEL DATA PELAMAR --}}
        <div class="table-responsive">
            <table class="table align-middle mb-0 text-nowrap table-hover">
                <thead class="table-light text-uppercase fs-7 text-secondary">
                    <tr>
                        <th style="width: 5%">No</th>
                        <th style="width: 14%">Nomor Surat</th>
                        <th style="width: 22%">Nama Pelamar & NIK</th>
                        <th style="width: 16%">Posisi Dilamar</th>
                        <th style="width: 12%">Kategori</th>
                        <th style="width: 13%">Pendidikan</th>
                        <th style="width: 8%">Tanggal</th>
                        <th style="width: 7%">Status</th>
                        <th style="width: 5%" class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($pelamar as $index => $item)
                        @php
                            $isUnread = empty($item->dibaca_admin_at);
                        @endphp
                        <tr class="{{ $isUnread ? 'bg-danger bg-opacity-10 border-start border-3 border-danger' : '' }}" id="row-pelamar-{{ $item->id }}">
                            <td class="fw-semibold text-muted">{{ $pelamar->firstItem() + $index }}</td>
                            <td>
                                <div class="d-flex align-items-center gap-1">
                                    <span class="badge bg-light text-dark font-monospace border px-2 py-1">{{ $item->surat->nomor_surat ?? $item->nomor_registrasi }}</span>
                                    @if($isUnread)
                                        <span class="badge bg-danger text-white rounded-pill px-1.5 py-0.5 fs-9 badge-baru-row" id="badge-baru-{{ $item->id }}" title="Belum pernah dibuka / ditinjau Admin">
                                            <i class="bi bi-bell-fill me-0.5"></i>Baru
                                        </span>
                                    @endif
                                </div>
                            </td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    @if($item->file_pas_foto)
                                        <img src="{{ route('arsip-lamaran.view-file', [$item->id, 'pas_foto']) }}" class="rounded-circle object-fit-cover border" style="width:36px; height:36px; flex-shrink:0;" alt="Foto">
                                    @else
                                        <div class="rounded-circle bg-primary bg-opacity-10 text-primary fw-bold d-flex align-items-center justify-content-center" style="width:36px; height:36px; flex-shrink:0;">
                                            {{ strtoupper(substr($item->nama_lengkap, 0, 1)) }}
                                        </div>
                                    @endif
                                    <div class="d-flex flex-column">
                                        <span class="fw-bold text-dark fs-7">{{ $item->nama_lengkap }}</span>
                                        <small class="text-muted fs-8 font-monospace">NIK: {{ $item->nik ?: '-' }} &bull; {{ $item->no_hp }}</small>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="fw-semibold text-dark">{{ $item->posisi_dilamar }}</span>
                            </td>
                            <td>
                                <span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 px-2 py-1 rounded-2">
                                    {{ $item->kategori_display }}
                                </span>
                            </td>
                            <td>
                                <div class="d-flex flex-column">
                                    <span class="fw-bold fs-7">{{ $item->pendidikan_terakhir }}</span>
                                    <small class="text-muted fs-8">{{ $item->nama_sekolah_terakhir ?: ($item->institusi_asal ?: '-') }} {{ $item->ipk !== null ? '(Nilai: ' . (float)$item->ipk . ')' : '' }}</small>
                                </div>
                            </td>
                            <td class="fs-7 text-secondary">{{ $item->tanggal_melamar ? $item->tanggal_melamar->translatedFormat('d M Y') : '-' }}</td>
                            <td>
                                @php
                                    $badgeClass = match($item->status_lamaran) {
                                        'Diterima' => 'bg-success text-white',
                                        'Ditolak' => 'bg-danger text-white',
                                        'Wawancara' => 'bg-primary text-white',
                                        'Seleksi Administrasi' => 'bg-info text-white',
                                        'Diarsipkan' => 'bg-secondary text-white',
                                        default => 'bg-warning text-dark',
                                    };
                                @endphp
                                <span class="badge {{ $badgeClass }} px-2 py-1 rounded-2 fw-normal fs-8">
                                    {{ $item->status_lamaran }}
                                </span>
                            </td>
                            <td class="text-center">
                                <button class="btn btn-sm btn-icon btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center shadow-xs btn-menu-pelamar"
                                    type="button"
                                    data-bs-toggle="modal"
                                    data-bs-target="#modalMenuAksiPelamar"
                                    data-pelamar='@json($item->load('pendidikan', 'kategoriPelamar', 'surat'))'
                                    style="width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 50% !important;"
                                    title="Pilihan Aksi Pelamar">
                                    <i class="bi bi-three-dots fs-5"></i>
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center py-5 text-muted align-middle">
                                <div class="d-flex flex-column align-items-center justify-content-center text-center w-100 py-2">
                                    <i class="bi bi-folder-x fs-2 mb-2 text-muted"></i>
                                    <span class="fw-medium">Belum ada data pelamar terdaftar.</span>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- PAGINATION FOOTER --}}
        @if($pelamar->hasPages() || $pelamar->total() > 0)
        <div id="paginationContainer" class="mt-auto pt-3 border-top">
            {{ $pelamar->links() }}
        </div>
        @endif
    </div>
</div>

{{-- ========================================================= --}}
{{-- MODAL MENU PILIHAN AKSI PELAMAR --}}
{{-- ========================================================= --}}
<div class="modal fade" id="modalMenuAksiPelamar" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 440px;">
        <div class="modal-content border-0 shadow-lg rounded-0 overflow-hidden">
            <div class="modal-header bg-white border-bottom py-3 px-4">
                <div class="d-flex align-items-center gap-2">
                    <div class="bg-primary bg-opacity-10 text-primary p-2 rounded-3">
                        <i class="bi bi-person-gear fs-5"></i>
                    </div>
                    <div>
                        <h6 class="modal-title fw-bold text-dark mb-0">Pilihan Aksi Pelamar</h6>
                        <small class="text-muted" id="menu_aksi_nama">-</small>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body p-3">
                <div class="d-flex flex-column gap-2">
                    {{-- 1. DETAIL --}}
                    <button type="button" class="btn btn-light text-start p-3 rounded-3 border d-flex align-items-center justify-content-between" id="btnAksiDetail">
                        <div class="d-flex align-items-center gap-3">
                            <div class="stat-icon bg-soft-primary p-2 rounded-3 text-primary" style="width: 42px; height: 42px; font-size: 1.1rem;">
                                <i class="bi bi-person-lines-fill"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 fw-bold text-dark">Biodata & Berkas Pelamar</h6>
                                <small class="text-muted">Lihat biodata, pendidikan & berkas lamaran</small>
                            </div>
                        </div>
                        <i class="bi bi-chevron-right text-muted"></i>
                    </button>

                    {{-- 2. EDIT --}}
                    <button type="button" class="btn btn-light text-start p-3 rounded-3 border d-flex align-items-center justify-content-between" id="btnAksiEdit">
                        <div class="d-flex align-items-center gap-3">
                            <div class="stat-icon bg-soft-warning p-2 rounded-3 text-warning" style="width: 42px; height: 42px; font-size: 1.1rem;">
                                <i class="bi bi-pencil-square"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 fw-bold text-dark">Edit & Update Status</h6>
                                <small class="text-muted">Perbarui data atau tahapan seleksi HRD</small>
                            </div>
                        </div>
                        <i class="bi bi-chevron-right text-muted"></i>
                    </button>

                    {{-- 3. HAPUS --}}
                    <button type="button" class="btn btn-light text-start p-3 rounded-3 border border-danger-subtle d-flex align-items-center justify-content-between" id="btnAksiHapus">
                        <div class="d-flex align-items-center gap-3">
                            <div class="stat-icon bg-soft-danger p-2 rounded-3 text-danger" style="width: 42px; height: 42px; font-size: 1.1rem;">
                                <i class="bi bi-trash-fill"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 fw-bold text-danger">Hapus Arsip Pelamar</h6>
                                <small class="text-muted">Hapus data & seluruh berkas fisik secara permanen</small>
                            </div>
                        </div>
                        <i class="bi bi-chevron-right text-danger"></i>
                    </button>
                </div>
            </div>

            <div class="modal-footer bg-light border-top py-2 px-3 justify-content-end">
                <button type="button" class="btn btn-secondary btn-sm px-3 rounded-2" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- ========================================================= --}}
{{-- MODAL PENGATURAN STATUS PORTAL REKRUTMEN (BUKA / TUTUP) --}}
{{-- ========================================================= --}}
<div class="modal fade" id="modalPengaturanRekrutmen" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow-lg rounded-0 overflow-hidden">
            <div class="modal-header bg-dark text-white py-3">
                <div class="d-flex align-items-center gap-2">
                    <div class="bg-warning p-2 rounded-2 text-dark">
                        <i class="bi bi-sliders fs-5"></i>
                    </div>
                    <div>
                        <h6 class="modal-title fw-bold mb-0">Pengaturan Status Pendaftaran Pelamar</h6>
                        <small class="text-white-50">Kontrol pembukaan atau penutupan akses formulir pendaftaran publik</small>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('arsip-lamaran.update-pengaturan-rekrutmen') }}" method="POST">
                @csrf
                <div class="modal-body p-4 bg-light">

                    {{-- STATUS TOGGLE SELECTOR --}}
                    <div class="card border-0 shadow-sm mb-3">
                        <div class="card-header bg-white py-2 border-bottom fw-bold text-primary fs-7">
                            <i class="bi bi-toggle-on me-2"></i>Status Akses Portal Pendaftaran Pelamar
                        </div>
                        <div class="card-body p-3">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="d-flex align-items-center p-3 border rounded-3 cursor-pointer bg-white h-100 {{ (isset($settingRekrutmen) && $settingRekrutmen->is_open) ? 'border-success border-2' : '' }}">
                                        <input type="radio" name="is_open" value="1" class="form-check-input me-3" {{ (!isset($settingRekrutmen) || $settingRekrutmen->is_open) ? 'checked' : '' }}>
                                        <div>
                                            <span class="d-block fw-bold text-success fs-7">
                                                <i class="bi bi-check-circle-fill me-1"></i> BUKA PENDAFTARAN
                                            </span>
                                            <small class="text-muted fs-8">Formulir aktif dan calon pelamar dapat mengisi dan mengirimkan lamaran.</small>
                                        </div>
                                    </label>
                                </div>
                                <div class="col-md-6">
                                    <label class="d-flex align-items-center p-3 border rounded-3 cursor-pointer bg-white h-100 {{ (isset($settingRekrutmen) && !$settingRekrutmen->is_open) ? 'border-danger border-2' : '' }}">
                                        <input type="radio" name="is_open" value="0" class="form-check-input me-3" {{ (isset($settingRekrutmen) && !$settingRekrutmen->is_open) ? 'checked' : '' }}>
                                        <div>
                                            <span class="d-block fw-bold text-danger fs-7">
                                                <i class="bi bi-lock-fill me-1"></i> TUTUP / KUNCI PENDAFTARAN
                                            </span>
                                            <small class="text-muted fs-8">Portal terkunci, menampilkan pengumuman penutupan resmi.</small>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- DETAIL PENGUMUMAN PENUTUPAN --}}
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white py-2 border-bottom fw-bold text-dark fs-7">
                            <i class="bi bi-megaphone-fill text-warning me-2"></i>Pengumuman Penutupan (Tampil Saat Ditutup)
                        </div>
                        <div class="card-body p-3">
                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label fs-8 fw-semibold mb-1">Judul Pengumuman</label>
                                    <input type="text" name="judul_penutupan" class="form-control form-control-sm" value="{{ $settingRekrutmen->judul_penutupan ?? 'Pendaftaran Lowongan Kerja Sedang Ditutup' }}" placeholder="Judul penutupan pendaftaran...">
                                </div>
                                <div class="col-12">
                                    <label class="form-label fs-8 fw-semibold mb-1">Pesan / Alasan Penutupan</label>
                                    <textarea name="pesan_penutupan" class="form-control form-control-sm" rows="3" placeholder="Pesan resmi untuk pelamar...">{{ $settingRekrutmen->pesan_penutupan ?? 'Mohon maaf, periode penerimaan berkas lamaran kerja saat ini telah resmi ditutup atau sedang dalam tahapan seleksi berkas. Pantau terus informasi rekrutmen periode berikutnya melalui kanal resmi Universitas Sari Mutiara Indonesia.' }}</textarea>
                                </div>
                                <div class="col-12">
                                    <label class="form-label fs-8 fw-semibold mb-1">Kontak Helpdesk / Layanan HRD</label>
                                    <input type="text" name="kontak_helpdesk" class="form-control form-control-sm" value="{{ $settingRekrutmen->kontak_helpdesk ?? 'Biro Administrasi & Kepegawaian (HRD) • Universitas Sari Mutiara Indonesia' }}" placeholder="Kontak bantuan...">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer bg-white border-top py-2 d-flex justify-content-between">
                    <button type="button" class="btn btn-secondary btn-sm px-3" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-sm px-4 fw-semibold rounded-2 shadow-sm">
                        <i class="bi bi-save me-1"></i> Simpan Status & Pengaturan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ========================================================= --}}
{{-- MODAL MASTER: KELOLA KATEGORI POSISI PELAMAR --}}
{{-- ========================================================= --}}
<div class="modal fade" id="modalKelolaKategori" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
        <div class="modal-content border-0 shadow-lg rounded-0 overflow-hidden">
            <div class="modal-header bg-dark text-white py-3">
                <div class="d-flex align-items-center gap-2">
                    <div class="bg-primary p-2 rounded-2 text-white">
                        <i class="bi bi-tags-fill fs-5"></i>
                    </div>
                    <div>
                        <h6 class="modal-title fw-bold mb-0">Master Kategori Posisi Pelamar</h6>
                        <small class="text-white-50">Kelola daftar kategori posisi formasi yang tampil di formulir</small>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4 bg-light">
                
                {{-- Form Tambah Kategori Baru --}}
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white py-2 fw-bold text-primary fs-7 border-bottom">
                        <i class="bi bi-plus-circle me-1"></i> Tambah Kategori Posisi Baru
                    </div>
                    <div class="card-body p-3">
                        <form action="{{ route('kategori-pelamar.store') }}" method="POST" class="row g-2 align-items-center" id="formTambahKategoriPelamar">
                            @csrf
                            <div class="col-md-5">
                                <input type="text" name="nama_kategori" id="inputNamaKategoriPelamar" class="form-control form-control-sm" placeholder="Nama Kategori (Contoh: Dosen Tetap)" required>
                            </div>
                            <div class="col-md-5">
                                <input type="text" name="keterangan" id="inputKeteranganKategoriPelamar" class="form-control form-control-sm" placeholder="Keterangan singkat / formasi...">
                            </div>
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-primary btn-sm w-100 rounded-2 fw-semibold" id="btnSubmitKategoriPelamar">
                                    <i class="bi bi-plus-lg me-1"></i> Simpan
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- Tabel Daftar Kategori Posisi dengan Scrolling --}}
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white py-2 d-flex flex-wrap justify-content-between align-items-center gap-2 border-bottom">
                        <div class="fw-bold text-dark fs-7">
                            <i class="bi bi-list-ul me-1 text-primary"></i> Daftar Kategori Posisi Aktif
                            <span class="badge bg-primary-subtle text-primary ms-1 px-2 py-0.5 rounded-pill fs-8 fw-semibold" id="badgeTotalKategori">{{ $kategoriList->count() }}</span>
                        </div>
                        <div style="width: 220px; max-width: 100%;">
                            <div class="input-group input-group-sm">
                                <span class="input-group-text bg-light border-end-0 text-muted"><i class="bi bi-search"></i></span>
                                <input type="text" id="searchModalKategori" class="form-control border-start-0 ps-0" placeholder="Cari kategori...">
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive" style="max-height: 320px; overflow-y: auto;">
                        <table class="table table-hover align-middle mb-0 fs-7" id="tableModalKategori">
                            <thead class="table-light text-secondary text-uppercase fs-8 sticky-top" style="position: sticky; top: 0; z-index: 2;">
                                <tr>
                                    <th style="width: 8%" class="text-center">No</th>
                                    <th style="width: 37%">Nama Kategori</th>
                                    <th style="width: 40%">Keterangan</th>
                                    <th style="width: 15%" class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($kategoriList as $kIndex => $katItem)
                                    <tr class="item-kategori-row">
                                        <td class="text-center text-muted fw-semibold">{{ $kIndex + 1 }}</td>
                                        <td class="fw-bold text-dark kat-nama">{{ $katItem->nama_kategori }}</td>
                                        <td class="text-muted fs-8 kat-ket">{{ $katItem->keterangan ?: '-' }}</td>
                                        <td class="text-center">
                                            <form action="{{ route('kategori-pelamar.destroy', $katItem->id) }}" method="POST" class="d-inline formDeleteKategoriPelamar">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-outline-danger btn-sm py-0 px-2 rounded-2" title="Hapus Kategori">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @empty
                                    <tr id="emptyKategoriRow">
                                        <td colspan="4" class="text-center py-4 text-muted">
                                            <i class="bi bi-inbox text-muted d-block fs-3 mb-1"></i>
                                            Belum ada kategori posisi.
                                        </td>
                                    </tr>
                                @endforelse
                                <tr id="noMatchingKategoriRow" style="display: none;">
                                    <td colspan="4" class="text-center py-3 text-muted">
                                        <i class="bi bi-search text-muted me-1"></i> Kategori tidak ditemukan.
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
            <div class="modal-footer bg-white border-top py-2">
                <button type="button" class="btn btn-secondary btn-sm px-3 rounded-2" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- ========================================================= --}}
{{-- MODAL 1: INPUT PELAMAR MANUAL (SISI ADMIN) --}}
{{-- ========================================================= --}}
<div class="modal fade" id="modalTambahPelamar" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content border-0 shadow-lg rounded-0 overflow-hidden">
            <div class="modal-header bg-dark text-white py-3">
                <div class="d-flex align-items-center gap-2">
                    <div class="bg-primary p-2 rounded-2 text-white">
                        <i class="bi bi-person-plus-fill fs-5"></i>
                    </div>
                    <div>
                        <h6 class="modal-title fw-bold mb-0">Input Data Pelamar Baru (Offline / Manual)</h6>
                        <small class="text-white-50">Masukkan biodata lengkap, riwayat pendidikan & berkas surat masuk terintegrasi</small>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('arsip-lamaran.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body p-4 bg-light">
                    
                    {{-- SEKSI 1: IDENTITAS & KONTAK --}}
                    <div class="card border-0 shadow-sm mb-3">
                        <div class="card-header bg-white py-2 border-bottom fw-bold text-primary fs-7">
                            <i class="bi bi-person-vcard me-2"></i>1. Identitas Diri & Kependudukan
                        </div>
                        <div class="card-body p-3">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label fs-8 fw-semibold mb-1">Nama Lengkap <span class="text-danger">*</span></label>
                                    <input type="text" name="nama_lengkap" class="form-control form-control-sm" placeholder="Contoh: Budi Santoso" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fs-8 fw-semibold mb-1">NIK KTP (16 Digit) <span class="text-danger">*</span></label>
                                    <input type="text" name="nik" class="form-control form-control-sm font-monospace" placeholder="16 digit angka" maxlength="16" minlength="16" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fs-8 fw-semibold mb-1">Email Aktif <span class="text-danger">*</span></label>
                                    <input type="email" name="email" class="form-control form-control-sm" placeholder="pelamar@gmail.com" required>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fs-8 fw-semibold mb-1">No. WhatsApp / HP <span class="text-danger">*</span></label>
                                    <input type="text" name="no_hp" class="form-control form-control-sm" placeholder="081234567890" required>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fs-8 fw-semibold mb-1">Jenis Kelamin <span class="text-danger">*</span></label>
                                    <select name="jenis_kelamin" class="form-select form-select-sm" required>
                                        <option value="Laki-laki">Laki-laki</option>
                                        <option value="Perempuan">Perempuan</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fs-8 fw-semibold mb-1">Agama <span class="text-danger">*</span></label>
                                    <select name="agama" class="form-select form-select-sm" required>
                                        <option value="" disabled selected>-- Pilih Agama --</option>
                                        <option value="Islam">Islam</option>
                                        <option value="Kristen Protestan">Kristen Protestan</option>
                                        <option value="Katolik">Katolik</option>
                                        <option value="Hindu">Hindu</option>
                                        <option value="Buddha">Buddha</option>
                                        <option value="Khonghucu">Khonghucu</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fs-8 fw-semibold mb-1">Tanggal Berkas Melamar <span class="text-danger">*</span></label>
                                    <input type="date" name="tanggal_melamar" value="{{ date('Y-m-d') }}" class="form-control form-control-sm" required>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fs-8 fw-semibold mb-1">Tempat Lahir <span class="text-danger">*</span></label>
                                    <input type="text" name="tempat_lahir" class="form-control form-control-sm" placeholder="Kota / Kabupaten" required>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fs-8 fw-semibold mb-1">Tanggal Lahir <span class="text-danger">*</span></label>
                                    <input type="date" name="tanggal_lahir" class="form-control form-control-sm" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fs-8 fw-semibold mb-1">Alamat Domisili Tinggal <span class="text-danger">*</span></label>
                                    <input type="text" name="alamat_tinggal" class="form-control form-control-sm" placeholder="Alamat lengkap pelamar..." required>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- SEKSI 2: FORMASI & POSISI --}}
                    <div class="card border-0 shadow-sm mb-3">
                        <div class="card-header bg-white py-2 border-bottom fw-bold text-primary fs-7">
                            <i class="bi bi-briefcase me-2"></i>2. Formasi, Posisi & Pendidikan Terakhir
                        </div>
                        <div class="card-body p-3">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label fs-8 fw-semibold mb-1">Kategori Posisi <span class="text-danger">*</span></label>
                                    <select name="kategori_pelamar_id" class="form-select form-select-sm" required>
                                        @foreach($kategoriList as $kat)
                                            <option value="{{ $kat->id }}">{{ $kat->nama_kategori }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-8">
                                    <label class="form-label fs-8 fw-semibold mb-1">Posisi yang Dilamar (Ketik Bebas) <span class="text-danger">*</span></label>
                                    <input type="text" name="posisi_dilamar" class="form-control form-control-sm" placeholder="Contoh: Dosen Farmasi / Staf Keuangan" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fs-8 fw-semibold mb-1">Pendidikan Terakhir <span class="text-danger">*</span></label>
                                    <select name="pendidikan_terakhir" class="form-select form-select-sm" required>
                                        <option value="SMA/SMK">SMA / SMK</option>
                                        <option value="D3">D3</option>
                                        <option value="D4">D4</option>
                                        <option value="S1" selected>S1</option>
                                        <option value="S2">S2</option>
                                        <option value="S3">S3</option>
                                    </select>
                                </div>
                                <div class="col-md-5">
                                    <label class="form-label fs-8 fw-semibold mb-1">Nama Sekolah / Universitas Terakhir <span class="text-danger">*</span></label>
                                    <input type="text" name="nama_sekolah_terakhir" class="form-control form-control-sm" placeholder="Nama Institusi Asal" required>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fs-8 fw-semibold mb-1">Nilai Rata-rata / IPK & Pengalaman</label>
                                    <div class="input-group input-group-sm">
                                        <input type="number" step="0.01" min="0" max="100" name="ipk" class="form-control" placeholder="Nilai / IPK" required>
                                        <input type="number" min="0" name="pengalaman_kerja_tahun" class="form-control" placeholder="Thn" value="0">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- SEKSI 3: RIWAYAT PENDIDIKAN DINAMIS (SINKRON 100% DENGAN FORM PUBLIK) --}}
                    <div class="card border-0 shadow-sm mb-3">
                        <div class="card-header bg-white py-2 border-bottom fw-bold text-primary fs-7 d-flex justify-content-between align-items-center">
                            <span><i class="bi bi-mortarboard me-2"></i>3. Riwayat Pendidikan Lengkap (Dapat Ditambah Bebas)</span>
                            <button type="button" class="btn btn-outline-primary btn-sm py-0 px-2 rounded-2 fs-8" id="btnAdminAddPendidikan">
                                <i class="bi bi-plus-lg me-1"></i>+ Tambah Riwayat Pendidikan
                            </button>
                        </div>
                        <div class="card-body p-3" id="adminContainerPendidikan">
                            <div class="p-3 border rounded-3 bg-white mb-2 shadow-2xs position-relative" id="admin_row_pen_0">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="fw-bold fs-8 text-primary"><i class="bi bi-bookmark-fill me-1"></i>Jenjang Pendidikan #1</span>
                                </div>
                                <div class="row g-2">
                                    <div class="col-md-3">
                                        <label class="form-label fs-8 mb-1">Jenjang <span class="text-danger">*</span></label>
                                        <select name="pendidikan[0][jenjang]" class="form-select form-select-sm" required>
                                            <option value="S3">S3 (Doktor)</option>
                                            <option value="S2">S2 (Magister)</option>
                                            <option value="S1" selected>S1 (Sarjana)</option>
                                            <option value="D4">D4 (Diploma Empat)</option>
                                            <option value="D3">D3 (Diploma Tiga)</option>
                                            <option value="SMA/SMK">SMA / SMK</option>
                                            <option value="SMP">SMP</option>
                                            <option value="SD">SD</option>
                                        </select>
                                    </div>
                                    <div class="col-md-5">
                                        <label class="form-label fs-8 mb-1">Nama Institusi / Sekolah / Universitas <span class="text-danger">*</span></label>
                                        <input type="text" name="pendidikan[0][nama_institusi]" class="form-control form-control-sm" placeholder="Nama Kampus / Sekolah" required>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fs-8 mb-1">Jurusan / Program Studi</label>
                                        <input type="text" name="pendidikan[0][jurusan]" class="form-control form-control-sm" placeholder="Contoh: Teknik Informatika / IPA">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fs-8 mb-1">Tahun Masuk</label>
                                        <input type="text" name="pendidikan[0][tahun_masuk]" class="form-control form-control-sm" placeholder="Contoh: 2018">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fs-8 mb-1">Tahun Lulus</label>
                                        <input type="text" name="pendidikan[0][tahun_lulus]" class="form-control form-control-sm" placeholder="Contoh: 2022">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fs-8 mb-1">Nilai Akhir / IPK</label>
                                        <input type="number" step="0.01" min="0" max="100" name="pendidikan[0][nilai_ipk]" class="form-control form-control-sm" placeholder="Contoh: 3.85">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- SEKSI 4: BERKAS SURAT MASUK (1 FILE PDF GABUNGAN) --}}
                    <div class="card border-0 shadow-sm mb-3">
                        <div class="card-header bg-white py-2 border-bottom fw-bold text-primary fs-7 d-flex justify-content-between align-items-center">
                            <span><i class="bi bi-envelope-paper-fill me-2"></i>4. Berkas Surat Masuk (Otomatis Masuk Manajemen Surat)</span>
                            <span class="badge bg-primary-subtle text-primary border border-primary-subtle fs-9">Format: 1 File PDF Gabungan</span>
                        </div>
                        <div class="card-body p-3">
                            <div class="alert alert-info py-2 px-3 mb-3 small d-flex align-items-center gap-2 border-0 rounded-2" style="font-size: 0.78rem;">
                                <i class="bi bi-info-circle-fill fs-6 flex-shrink-0 text-primary"></i>
                                <span>Seluruh dokumen fisik pelamar (CV, Surat Lamaran, KTP, Ijazah, Transkrip Nilai, Pas Foto, dll.) digabung menjadi <strong>1 file PDF utuh</strong>. Berkas ini otomatis dicatat sebagai <strong>Surat Masuk</strong> dan dapat langsung didisposisikan.</span>
                            </div>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label fs-8 fw-semibold mb-1">Nomor Surat / Agenda Masuk <span class="text-muted fw-normal">(Opsional)</span></label>
                                    <input type="text" name="nomor_surat" class="form-control form-control-sm" placeholder="Otomatis sistem jika kosong">
                                    <small class="text-muted fs-9">Contoh: lamaran-usm/2026/08-0001</small>
                                </div>
                                <div class="col-md-5">
                                    <label class="form-label fs-8 fw-semibold mb-1">Upload Berkas Gabungan (PDF) <span class="text-danger">*</span></label>
                                    <input type="file" name="file_berkas_lamaran" class="form-control form-control-sm" accept="application/pdf" required>
                                    <small class="text-muted fs-9">Maksimal ukuran file: 10 MB (Format PDF)</small>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fs-8 fw-semibold mb-1">Catatan Evaluasi / Keterangan</label>
                                    <textarea name="catatan_hrd" class="form-control form-control-sm" rows="1" placeholder="Catatan opsional..."></textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer bg-white border-top py-2">
                    <button type="button" class="btn btn-light btn-sm px-3 border" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-sm px-4 shadow-sm rounded-2">
                        <i class="bi bi-save me-1"></i> Simpan Arsip Pelamar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ========================================================= --}}
{{-- MODAL 2: EDIT DATA & STATUS SELEKSI (SISI ADMIN) --}}
{{-- ========================================================= --}}
<div class="modal fade" id="modalEditPelamar" data-bs-backdrop="static" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content border-0 shadow-lg rounded-0 overflow-hidden">
            <div class="modal-header bg-dark text-white py-3">
                <div class="d-flex align-items-center gap-2">
                    <div class="bg-warning text-dark p-2 rounded-2">
                        <i class="bi bi-pencil-square fs-5"></i>
                    </div>
                    <div>
                        <h6 class="modal-title fw-bold mb-0">Edit Data & Status Seleksi Pelamar</h6>
                        <small class="text-white-50">Perbarui tahapan status seleksi, biodata, atau riwayat pendidikan</small>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formEditPelamar" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-body p-4 bg-light">
                    
                    {{-- STATUS TAHAPAN SELEKSI --}}
                    <div class="card border-primary border-opacity-25 shadow-sm mb-3 bg-primary bg-opacity-10">
                        <div class="card-body p-3">
                            <div class="row align-items-center g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-bold text-dark fs-7 mb-1">
                                        <i class="bi bi-flag-fill text-primary me-1"></i>Tahapan Status Seleksi Pelamar <span class="text-danger">*</span>
                                    </label>
                                    <select id="edit_status_lamaran" name="status_lamaran" class="form-select form-select-sm fw-bold border-primary" required>
                                        <option value="Berkas Masuk">Berkas Masuk</option>
                                        <option value="Seleksi Administrasi">Seleksi Administrasi</option>
                                        <option value="Wawancara">Wawancara</option>
                                        <option value="Diterima">Diterima</option>
                                        <option value="Ditolak">Ditolak</option>
                                        <option value="Diarsipkan">Diarsipkan</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold text-dark fs-7 mb-1">Tanggal Melamar <span class="text-danger">*</span></label>
                                    <input type="date" id="edit_tanggal_melamar" name="tanggal_melamar" class="form-control form-control-sm" required>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- SEKSI 1: IDENTITAS DIRI & KEPENDUDUKAN --}}
                    <div class="card border-0 shadow-sm mb-3">
                        <div class="card-header bg-white py-2 border-bottom fw-bold text-primary fs-7">
                            <i class="bi bi-person-vcard me-2"></i>1. Identitas Diri & Kependudukan
                        </div>
                        <div class="card-body p-3">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label fs-8 fw-semibold mb-1">Nama Lengkap <span class="text-danger">*</span></label>
                                    <input type="text" id="edit_nama_lengkap" name="nama_lengkap" class="form-control form-control-sm" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fs-8 fw-semibold mb-1">NIK KTP (16 Digit) <span class="text-danger">*</span></label>
                                    <input type="text" id="edit_nik" name="nik" class="form-control form-control-sm font-monospace" maxlength="16" minlength="16" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fs-8 fw-semibold mb-1">Email Aktif <span class="text-danger">*</span></label>
                                    <input type="email" id="edit_email" name="email" class="form-control form-control-sm" required>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fs-8 fw-semibold mb-1">No. WhatsApp / HP <span class="text-danger">*</span></label>
                                    <input type="text" id="edit_no_hp" name="no_hp" class="form-control form-control-sm" required>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fs-8 fw-semibold mb-1">Jenis Kelamin <span class="text-danger">*</span></label>
                                    <select id="edit_jenis_kelamin" name="jenis_kelamin" class="form-select form-select-sm" required>
                                        <option value="Laki-laki">Laki-laki</option>
                                        <option value="Perempuan">Perempuan</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fs-8 fw-semibold mb-1">Agama <span class="text-danger">*</span></label>
                                    <select id="edit_agama" name="agama" class="form-select form-select-sm" required>
                                        <option value="" disabled>-- Pilih Agama --</option>
                                        <option value="Islam">Islam</option>
                                        <option value="Kristen Protestan">Kristen Protestan</option>
                                        <option value="Katolik">Katolik</option>
                                        <option value="Hindu">Hindu</option>
                                        <option value="Buddha">Buddha</option>
                                        <option value="Khonghucu">Khonghucu</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fs-8 fw-semibold mb-1">Tempat Lahir <span class="text-danger">*</span></label>
                                    <input type="text" id="edit_tempat_lahir" name="tempat_lahir" class="form-control form-control-sm" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fs-8 fw-semibold mb-1">Tanggal Lahir <span class="text-danger">*</span></label>
                                    <input type="date" id="edit_tanggal_lahir" name="tanggal_lahir" class="form-control form-control-sm" required>
                                </div>
                                <div class="col-md-8">
                                    <label class="form-label fs-8 fw-semibold mb-1">Alamat Domisili Tinggal <span class="text-danger">*</span></label>
                                    <input type="text" id="edit_alamat_tinggal" name="alamat_tinggal" class="form-control form-control-sm" required>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- SEKSI 2: FORMASI, POSISI & PENDIDIKAN TERAKHIR --}}
                    <div class="card border-0 shadow-sm mb-3">
                        <div class="card-header bg-white py-2 border-bottom fw-bold text-primary fs-7">
                            <i class="bi bi-briefcase me-2"></i>2. Formasi, Posisi & Pendidikan Terakhir
                        </div>
                        <div class="card-body p-3">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label fs-8 fw-semibold mb-1">Kategori Posisi <span class="text-danger">*</span></label>
                                    <select id="edit_kategori_pelamar_id" name="kategori_pelamar_id" class="form-select form-select-sm" required>
                                        @foreach($kategoriList as $kat)
                                            <option value="{{ $kat->id }}">{{ $kat->nama_kategori }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-8">
                                    <label class="form-label fs-8 fw-semibold mb-1">Posisi yang Dilamar (Ketik Bebas) <span class="text-danger">*</span></label>
                                    <input type="text" id="edit_posisi_dilamar" name="posisi_dilamar" class="form-control form-control-sm" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fs-8 fw-semibold mb-1">Pendidikan Terakhir <span class="text-danger">*</span></label>
                                    <select id="edit_pendidikan_terakhir" name="pendidikan_terakhir" class="form-select form-select-sm" required>
                                        <option value="SMA/SMK">SMA / SMK</option>
                                        <option value="D3">D3</option>
                                        <option value="D4">D4</option>
                                        <option value="S1">S1</option>
                                        <option value="S2">S2</option>
                                        <option value="S3">S3</option>
                                    </select>
                                </div>
                                <div class="col-md-5">
                                    <label class="form-label fs-8 fw-semibold mb-1">Nama Sekolah / Universitas Terakhir <span class="text-danger">*</span></label>
                                    <input type="text" id="edit_nama_sekolah_terakhir" name="nama_sekolah_terakhir" class="form-control form-control-sm" required>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fs-8 fw-semibold mb-1">Nilai Rata-rata / IPK & Pengalaman</label>
                                    <div class="input-group input-group-sm">
                                        <input type="number" step="0.01" min="0" max="100" id="edit_ipk" name="ipk" class="form-control" placeholder="IPK" required>
                                        <input type="number" min="0" id="edit_pengalaman_kerja_tahun" name="pengalaman_kerja_tahun" class="form-control" placeholder="Thn" value="0">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- SEKSI 3: EDIT RIWAYAT PENDIDIKAN DINAMIS --}}
                    <div class="card border-0 shadow-sm mb-3">
                        <div class="card-header bg-white py-2 border-bottom fw-bold text-primary fs-7 d-flex justify-content-between align-items-center">
                            <span><i class="bi bi-mortarboard me-2"></i>3. Riwayat Pendidikan Lengkap (Dapat Ditambah Bebas)</span>
                            <button type="button" class="btn btn-outline-primary btn-sm py-0 px-2 rounded-2 fs-8" id="btnEditAddPendidikan">
                                <i class="bi bi-plus-lg me-1"></i>+ Tambah Riwayat Pendidikan
                            </button>
                        </div>
                        <div class="card-body p-3" id="editContainerPendidikan">
                            {{-- Populated via JS populateEditModal --}}
                        </div>
                    </div>

                    {{-- SEKSI 4: BERKAS SURAT MASUK (1 FILE PDF GABUNGAN) & CATATAN --}}
                    <div class="card border-0 shadow-sm mb-3">
                        <div class="card-header bg-white py-2 border-bottom fw-bold text-primary fs-7 d-flex justify-content-between align-items-center">
                            <span><i class="bi bi-envelope-paper-fill me-2"></i>4. Berkas Surat Masuk (Terkoneksi ke Manajemen Surat)</span>
                            <span class="badge bg-primary-subtle text-primary border border-primary-subtle fs-9">Format: 1 File PDF Gabungan</span>
                        </div>
                        <div class="card-body p-3">
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label fs-8 fw-semibold mb-1">Nomor Surat / Agenda Masuk</label>
                                    <input type="text" id="edit_nomor_surat" name="nomor_surat" class="form-control form-control-sm" placeholder="Contoh: lamaran-usm/2026/08-0001">
                                    <small class="text-muted fs-9">Tersinkronisasi otomatis dengan menu Manajemen Surat</small>
                                </div>
                                <div class="col-md-5">
                                    <label class="form-label fs-8 fw-semibold mb-1">Ganti Berkas Gabungan (PDF) <span class="text-muted fw-normal">(Opsional)</span></label>
                                    <input type="file" name="file_berkas_lamaran" class="form-control form-control-sm" accept="application/pdf">
                                    <small class="text-muted fs-9">Kosongkan jika tidak ingin mengganti. Maksimal 10 MB (PDF)</small>
                                    <div id="edit_berkas_preview_container" class="mt-2" style="display: none;">
                                        <a href="#" id="btn_edit_lihat_berkas" target="_blank" class="btn btn-outline-primary btn-sm py-0.5 px-2 fs-8 rounded-2">
                                            <i class="bi bi-file-earmark-pdf-fill me-1 text-danger"></i>Lihat Berkas PDF Saat Ini
                                        </a>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label fs-8 fw-semibold mb-1">Catatan Evaluasi HRD / Tim Seleksi</label>
                                    <textarea id="edit_catatan_hrd" name="catatan_hrd" class="form-control form-control-sm" rows="2" placeholder="Catatan evaluasi..."></textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer bg-white border-top py-2">
                    <button type="button" class="btn btn-light btn-sm px-3 border" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning btn-sm px-4 fw-bold shadow-sm rounded-2">
                        <i class="bi bi-save me-1"></i> Perbarui Data & Status
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ========================================================= --}}
{{-- MODAL 3: DETAIL TALENT PROFILE & BERKAS LENGKAP --}}
{{-- ========================================================= --}}
<div class="modal fade" id="modalDetailPelamar" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content border-0 shadow-lg rounded-0 overflow-hidden">
            <div class="modal-header bg-dark text-white py-3 px-4">
                <div class="d-flex align-items-center gap-2.5">
                    <div class="bg-info bg-opacity-25 text-info p-2 rounded-2">
                        <i class="bi bi-person-lines-fill fs-5"></i>
                    </div>
                    <div>
                        <h6 class="modal-title fw-bold mb-0">Biodata & Riwayat Akademik</h6>
                        <small class="text-white-50">Informasi biodata diri, riwayat pendidikan, dan berkas lamaran</small>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4 bg-light">
                
                {{-- HEADER TALENT --}}
                <div class="card border-0 shadow-sm mb-4 rounded-3">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center gap-4">
                            <div id="detail_avatar_container" style="width:76px; height:98px; flex-shrink:0;" class="rounded-3 border shadow-xs overflow-hidden d-flex align-items-center justify-content-center bg-primary bg-opacity-10 text-primary">
                                <img id="detail_foto_img" src="{{ asset('profile/default-profile.png') }}" class="w-100 h-100 object-fit-cover" style="display:none;" alt="Foto">
                                <span id="detail_avatar_fallback" class="fw-bold fs-2 text-primary">P</span>
                            </div>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
                                    <div>
                                        <h4 class="fw-bold text-dark mb-2" id="detail_nama_lengkap">-</h4>
                                        <div class="d-flex gap-2.5 align-items-center flex-wrap">
                                            <span class="badge bg-light text-primary border font-monospace px-2.5 py-1.5 fs-8" id="detail_nomor_registrasi" title="Nomor Surat">-</span>
                                            <span class="badge bg-light text-dark border font-monospace px-2.5 py-1.5 fs-8" id="detail_nik" title="Nomor Induk Kependudukan">-</span>
                                            <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2.5 py-1.5 fs-8" id="detail_posisi_kategori" title="Posisi Dilamar">-</span>
                                        </div>
                                    </div>
                                    <span class="badge px-3.5 py-2 rounded-pill fs-7 shadow-xs fw-semibold" id="detail_status_lamaran">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- TABS DETAIL --}}
                <ul class="nav nav-pills mb-4 bg-white p-2.5 rounded-3 border shadow-xs d-flex gap-2" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active py-2.5 px-3.5 fs-7 fw-semibold" id="tab-bio-btn" data-bs-toggle="pill" data-bs-target="#tab-bio" type="button" role="tab">
                            <i class="bi bi-person-vcard me-1.5"></i> Biodata & Kontak
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link py-2.5 px-3.5 fs-7 fw-semibold" id="tab-edu-btn" data-bs-toggle="pill" data-bs-target="#tab-edu" type="button" role="tab">
                            <i class="bi bi-mortarboard me-1.5"></i> Riwayat Pendidikan
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link py-2.5 px-3.5 fs-7 fw-semibold" id="tab-doc-btn" data-bs-toggle="pill" data-bs-target="#tab-doc" type="button" role="tab">
                            <i class="bi bi-file-earmark-pdf me-1.5"></i> Lampiran Berkas PDF
                        </button>
                    </li>
                </ul>

                <div class="tab-content" id="pills-tabContent">
                    
                    {{-- TAB 1: DATA PRIBADI --}}
                    <div class="tab-pane fade show active" id="tab-bio" role="tabpanel">
                        <div class="card border-0 shadow-sm rounded-3">
                            <div class="card-body p-4">
                                <div class="row g-4 fs-7">
                                    <div class="col-md-6">
                                        <div class="p-3 rounded-3 bg-white border border-light-subtle h-100 shadow-2xs">
                                            <small class="text-secondary text-uppercase fw-semibold fs-8 d-flex align-items-center gap-2 mb-2">
                                                <i class="bi bi-envelope text-primary fs-7"></i> Alamat Email
                                            </small>
                                            <a id="detail_email_link" href="#" class="fw-bold text-primary text-decoration-none d-block text-truncate fs-7">-</a>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="p-3 rounded-3 bg-white border border-light-subtle h-100 shadow-2xs">
                                            <small class="text-secondary text-uppercase fw-semibold fs-8 d-flex align-items-center gap-2 mb-2">
                                                <i class="bi bi-whatsapp text-success fs-7"></i> No. WhatsApp / Handphone
                                            </small>
                                            <a id="detail_phone_link" href="#" target="_blank" class="fw-bold text-success text-decoration-none d-block fs-7">-</a>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="p-3 rounded-3 bg-white border border-light-subtle h-100 shadow-2xs">
                                            <small class="text-secondary text-uppercase fw-semibold fs-8 d-flex align-items-center gap-2 mb-2">
                                                <i class="bi bi-calendar-event text-secondary fs-7"></i> Tempat & Tanggal Lahir
                                            </small>
                                            <span class="fw-bold text-dark d-block fs-7" id="detail_ttl">-</span>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="p-3 rounded-3 bg-white border border-light-subtle h-100 shadow-2xs">
                                            <small class="text-secondary text-uppercase fw-semibold fs-8 d-flex align-items-center gap-2 mb-2">
                                                <i class="bi bi-gender-ambiguous text-secondary fs-7"></i> Jenis Kelamin
                                            </small>
                                            <span class="fw-bold text-dark d-block fs-7" id="detail_jk">-</span>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="p-3 rounded-3 bg-white border border-light-subtle h-100 shadow-2xs">
                                            <small class="text-secondary text-uppercase fw-semibold fs-8 d-flex align-items-center gap-2 mb-2">
                                                <i class="bi bi-book text-secondary fs-7"></i> Agama
                                            </small>
                                            <span class="fw-bold text-dark d-block fs-7" id="detail_agama">-</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="p-3 rounded-3 bg-white border border-light-subtle h-100 shadow-2xs">
                                            <small class="text-secondary text-uppercase fw-semibold fs-8 d-flex align-items-center gap-2 mb-2">
                                                <i class="bi bi-mortarboard text-secondary fs-7"></i> Pendidikan Terakhir & Institusi
                                            </small>
                                            <span class="fw-bold text-dark d-block fs-7" id="detail_pendidikan_terakhir">-</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="p-3 rounded-3 bg-white border border-light-subtle h-100 shadow-2xs">
                                            <small class="text-secondary text-uppercase fw-semibold fs-8 d-flex align-items-center gap-2 mb-2">
                                                <i class="bi bi-briefcase text-secondary fs-7"></i> Pengalaman Kerja
                                            </small>
                                            <span class="fw-bold text-dark d-block fs-7" id="detail_pengalaman_kerja">-</span>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="p-3 rounded-3 bg-white border border-light-subtle shadow-2xs">
                                            <small class="text-secondary text-uppercase fw-semibold fs-8 d-flex align-items-center gap-2 mb-2">
                                                <i class="bi bi-geo-alt text-secondary fs-7"></i> Alamat Domisili Lengkap
                                            </small>
                                            <span class="fw-semibold text-dark d-block fs-7" id="detail_alamat">-</span>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="p-3.5 rounded-3 bg-white border border-light-subtle shadow-2xs">
                                            <small class="text-secondary text-uppercase fw-semibold fs-8 d-flex align-items-center gap-2 mb-2">
                                                <i class="bi bi-chat-left-quote text-secondary fs-7"></i> Catatan Evaluasi Tim HRD / Verifikator
                                            </small>
                                            <p class="mb-0 text-dark fst-italic fs-7 mt-1" id="detail_catatan_hrd">-</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- TAB 2: RIWAYAT PENDIDIKAN (PERSIS DAN SINKRON) --}}
                    <div class="tab-pane fade" id="tab-edu" role="tabpanel">
                        <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
                            <div class="table-responsive">
                                <table class="table table-hover align-middle mb-0 fs-7">
                                    <thead class="table-light text-secondary text-uppercase fs-8 border-bottom">
                                        <tr>
                                            <th class="py-3 px-3 text-center" style="width: 6%">No.</th>
                                            <th class="py-3 px-3" style="width: 15%">Jenjang</th>
                                            <th class="py-3 px-3" style="width: 31%">Nama Institusi / Sekolah</th>
                                            <th class="py-3 px-3" style="width: 25%">Program Studi / Jurusan</th>
                                            <th class="py-3 px-3 text-center" style="width: 13%">Tahun Masuk / Lulus</th>
                                            <th class="py-3 px-3 text-center" style="width: 10%">Nilai / IPK</th>
                                        </tr>
                                    </thead>
                                    <tbody id="detail_tbody_pendidikan">
                                        {{-- Populated via JS --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    {{-- TAB 3: LAMPIRAN BERKAS PDF --}}
                    <div class="tab-pane fade" id="tab-doc" role="tabpanel">
                        <div class="card border-0 shadow-sm rounded-3">
                            <div class="card-body p-4">
                                <div class="row g-4" id="detail_files_container">
                                    {{-- Populated via JS --}}
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            <div class="modal-footer bg-white border-top py-3 px-4 justify-content-end">
                <button type="button" class="btn btn-secondary btn-sm px-4 py-2 rounded-2 shadow-xs fw-semibold" data-bs-dismiss="modal">
                    <i class="bi bi-x-lg me-1"></i> Tutup
                </button>
            </div>
        </div>
    </div>
</div>

{{-- ========================================================= --}}
{{-- MODAL 4: HAPUS ARSIP --}}
{{-- ========================================================= --}}
<div class="modal fade" id="modalHapusPelamar" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content border-0 shadow-lg rounded-0 text-center p-3">
            <div class="modal-body">
                <div class="bg-danger bg-opacity-10 text-danger p-3 rounded-circle d-inline-flex mb-3">
                    <i class="bi bi-exclamation-triangle-fill fs-2"></i>
                </div>
                <h6 class="fw-bold text-dark mb-2">Hapus Arsip Pelamar?</h6>
                <p class="text-muted fs-7 mb-3">
                    Apakah Anda yakin ingin menghapus arsip pelamar <strong id="hapus_nama_pelamar" class="text-dark"></strong>, seluruh riwayat data, dan seluruh berkas fisik dari server secara permanen?
                </p>
                <form id="formHapusPelamar" method="POST">
                    @csrf
                    @method('DELETE')
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-light border w-50 btn-sm" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-danger w-50 btn-sm shadow-sm">Ya, Hapus</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        let selectedPelamar = null;

        // Template Generator Riwayat Pendidikan untuk Admin (Tambah & Edit)
        function createEducationRowHtml(index, data = {}, prefix = 'pendidikan') {
            const rowId = prefix + '_row_' + index;
            const displayNo = index + 1;
            const jenjang = data.jenjang || 'S1';
            const namaInstitusi = data.nama_institusi || '';
            const jurusan = data.jurusan || '';
            const tahunMasuk = data.tahun_masuk || '';
            const tahunLulus = data.tahun_lulus || '';
            const nilaiIpk = data.nilai_ipk || '';

            const jenjangOptions = ['S3', 'S2', 'S1', 'D4', 'D3', 'SMA/SMK', 'SMP', 'SD']
                .map(j => `<option value="${j}" ${jenjang === j ? 'selected' : ''}>${j}</option>`)
                .join('');

            return `
                <div class="p-3 border rounded-3 bg-white mb-2 shadow-2xs position-relative" id="${rowId}">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="fw-bold fs-8 text-primary"><i class="bi bi-bookmark-fill me-1"></i>Jenjang Pendidikan #${displayNo}</span>
                        ${index > 0 ? `<button type="button" class="btn btn-outline-danger btn-sm py-0 px-2 rounded-2 fs-8" onclick="document.getElementById('${rowId}').remove()"><i class="bi bi-trash me-1"></i>Hapus</button>` : ''}
                    </div>
                    <div class="row g-2">
                        <div class="col-md-3">
                            <label class="form-label fs-8 mb-1">Jenjang <span class="text-danger">*</span></label>
                            <select name="pendidikan[${index}][jenjang]" class="form-select form-select-sm" required>
                                ${jenjangOptions}
                            </select>
                        </div>
                        <div class="col-md-5">
                            <label class="form-label fs-8 mb-1">Nama Institusi / Sekolah / Universitas <span class="text-danger">*</span></label>
                            <input type="text" name="pendidikan[${index}][nama_institusi]" class="form-control form-control-sm" value="${namaInstitusi}" placeholder="Nama Kampus / Sekolah" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fs-8 mb-1">Jurusan / Program Studi</label>
                            <input type="text" name="pendidikan[${index}][jurusan]" class="form-control form-control-sm" value="${jurusan}" placeholder="Contoh: Teknik Informatika / IPA">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fs-8 mb-1">Tahun Masuk</label>
                            <input type="text" name="pendidikan[${index}][tahun_masuk]" class="form-control form-control-sm" value="${tahunMasuk}" placeholder="Contoh: 2018">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fs-8 mb-1">Tahun Lulus</label>
                            <input type="text" name="pendidikan[${index}][tahun_lulus]" class="form-control form-control-sm" value="${tahunLulus}" placeholder="Contoh: 2022">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fs-8 mb-1">Nilai Akhir / IPK</label>
                            <input type="number" step="0.01" min="0" max="100" name="pendidikan[${index}][nilai_ipk]" class="form-control form-control-sm" value="${nilaiIpk}" placeholder="Contoh: 3.85">
                        </div>
                    </div>
                </div>
            `;
        }

        // Dynamic Admin Education Add (Modal Tambah)
        let adminAddIndex = 1;
        document.getElementById('btnAdminAddPendidikan').addEventListener('click', function() {
            const container = document.getElementById('adminContainerPendidikan');
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = createEducationRowHtml(adminAddIndex, {}, 'admin_add');
            container.appendChild(tempDiv.firstElementChild);
            adminAddIndex++;
        });

        // Dynamic Admin Education Add (Modal Edit)
        let adminEditIndex = 0;
        document.getElementById('btnEditAddPendidikan').addEventListener('click', function() {
            const container = document.getElementById('editContainerPendidikan');
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = createEducationRowHtml(adminEditIndex, {}, 'admin_edit');
            container.appendChild(tempDiv.firstElementChild);
            adminEditIndex++;
        });

        function populateEditModal(data) {
            const form = document.getElementById('formEditPelamar');
            form.action = `/arsip-lamaran/${data.id}`;

            document.getElementById('edit_nama_lengkap').value = data.nama_lengkap || '';
            document.getElementById('edit_nik').value = data.nik || '';
            document.getElementById('edit_email').value = data.email || '';
            document.getElementById('edit_no_hp').value = data.no_hp || '';
            document.getElementById('edit_jenis_kelamin').value = data.jenis_kelamin || 'Laki-laki';
            document.getElementById('edit_agama').value = data.agama || '';
            document.getElementById('edit_tempat_lahir').value = data.tempat_lahir || '';
            document.getElementById('edit_tanggal_lahir').value = data.tanggal_lahir ? data.tanggal_lahir.substring(0, 10) : '';
            document.getElementById('edit_alamat_tinggal').value = data.alamat_tinggal || '';
            document.getElementById('edit_kategori_pelamar_id').value = data.kategori_pelamar_id || '';
            document.getElementById('edit_posisi_dilamar').value = data.posisi_dilamar || '';
            document.getElementById('edit_pendidikan_terakhir').value = data.pendidikan_terakhir || 'S1';
            document.getElementById('edit_nama_sekolah_terakhir').value = data.nama_sekolah_terakhir || data.institusi_asal || '';
            document.getElementById('edit_ipk').value = data.ipk || '';
            document.getElementById('edit_pengalaman_kerja_tahun').value = (data.pengalaman_kerja_tahun !== undefined && data.pengalaman_kerja_tahun !== null) ? data.pengalaman_kerja_tahun : 0;
            document.getElementById('edit_status_lamaran').value = data.status_lamaran || 'Berkas Masuk';
            document.getElementById('edit_tanggal_melamar').value = data.tanggal_melamar ? data.tanggal_melamar.substring(0, 10) : '';
            
            // Integrasi Nomor Surat Masuk
            const nomorSurat = data.surat ? data.surat.nomor_surat : '';
            document.getElementById('edit_nomor_surat').value = nomorSurat;

            // Preview Berkas PDF Terkini
            const berkasContainer = document.getElementById('edit_berkas_preview_container');
            const btnLihatBerkas = document.getElementById('btn_edit_lihat_berkas');
            if (data.file_surat_lamaran || (data.surat && data.surat.file_surat) || data.file_cv) {
                berkasContainer.style.display = 'block';
                btnLihatBerkas.href = `/arsip-lamaran/${data.id}/view-file/berkas_lengkap`;
            } else {
                berkasContainer.style.display = 'none';
            }

            document.getElementById('edit_catatan_hrd').value = data.catatan_hrd || '';

            // Populate Riwayat Pendidikan Repeater di Modal Edit
            const editEduContainer = document.getElementById('editContainerPendidikan');
            editEduContainer.innerHTML = '';
            adminEditIndex = 0;

            if (data.pendidikan && data.pendidikan.length > 0) {
                data.pendidikan.forEach(pen => {
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = createEducationRowHtml(adminEditIndex, pen, 'admin_edit');
                    editEduContainer.appendChild(tempDiv.firstElementChild);
                    adminEditIndex++;
                });
            } else {
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = createEducationRowHtml(0, {
                    jenjang: data.pendidikan_terakhir || 'S1',
                    nama_institusi: data.nama_sekolah_terakhir || data.institusi_asal || '',
                    nilai_ipk: data.ipk || ''
                }, 'admin_edit');
                editEduContainer.appendChild(tempDiv.firstElementChild);
                adminEditIndex = 1;
            }
        }

        function populateDetailModal(data) {
            document.getElementById('detail_nama_lengkap').textContent = data.nama_lengkap || '-';
            const noSuratDetail = (data.surat && data.surat.nomor_surat) ? data.surat.nomor_surat : (data.nomor_registrasi || '-');
            const elemNoSurat = document.getElementById('detail_nomor_registrasi');
            if (elemNoSurat) {
                elemNoSurat.innerHTML = '<i class="bi bi-envelope-paper me-1"></i>' + noSuratDetail;
                elemNoSurat.title = 'Nomor Surat';
            }
            document.getElementById('detail_nik').textContent = data.nik ? ('NIK: ' + data.nik) : 'NIK: -';
            
            const katName = (data.kategori_pelamar && data.kategori_pelamar.nama_kategori) ? data.kategori_pelamar.nama_kategori : (data.kategori_pelamar || 'Formasi Umum');
            document.getElementById('detail_posisi_kategori').textContent = (data.posisi_dilamar || '-') + ' (' + katName + ')';
            
            // Status Lamaran Badge dengan Warna Sesuai
            const statusElem = document.getElementById('detail_status_lamaran');
            const statusVal = data.status_lamaran || 'Berkas Masuk';
            statusElem.textContent = statusVal;
            statusElem.className = 'badge px-3 py-2 rounded-pill fs-8 shadow-xs fw-semibold ';
            switch (statusVal) {
                case 'Diterima':
                    statusElem.className += 'bg-success text-white';
                    break;
                case 'Ditolak':
                    statusElem.className += 'bg-danger text-white';
                    break;
                case 'Wawancara':
                    statusElem.className += 'bg-primary text-white';
                    break;
                case 'Seleksi Administrasi':
                    statusElem.className += 'bg-info text-white';
                    break;
                case 'Diarsipkan':
                    statusElem.className += 'bg-secondary text-white';
                    break;
                default:
                    statusElem.className += 'bg-warning text-dark';
                    break;
            }

            // Avatar / Foto Profil
            const fotoImg = document.getElementById('detail_foto_img');
            const avatarFallback = document.getElementById('detail_avatar_fallback');
            if (data.file_pas_foto) {
                fotoImg.src = `/arsip-lamaran/${data.id}/view-file/pas_foto`;
                fotoImg.style.display = 'block';
                if (avatarFallback) avatarFallback.style.display = 'none';
            } else {
                fotoImg.style.display = 'none';
                if (avatarFallback) {
                    avatarFallback.style.display = 'block';
                    avatarFallback.textContent = (data.nama_lengkap || 'P').charAt(0).toUpperCase();
                }
            }


            document.getElementById('detail_email_link').textContent = data.email || '-';
            document.getElementById('detail_email_link').href = 'mailto:' + (data.email || '');

            document.getElementById('detail_phone_link').textContent = data.no_hp || '-';
            const cleanPhone = (data.no_hp || '').replace(/[^0-9]/g, '');
            const waPhone = cleanPhone.startsWith('0') ? '62' + cleanPhone.substring(1) : cleanPhone;
            if (cleanPhone) {
                document.getElementById('detail_phone_link').href = 'https://wa.me/' + waPhone;
                document.getElementById('detail_phone_link').title = 'Klik untuk menghubungi via WhatsApp';
            } else {
                document.getElementById('detail_phone_link').removeAttribute('href');
            }

            // Format tanggal lahir ke Bahasa Indonesia
            let tglLahirFormatted = '-';
            if (data.tanggal_lahir) {
                try {
                    const dt = new Date(data.tanggal_lahir);
                    tglLahirFormatted = dt.toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' });
                } catch(e) {
                    tglLahirFormatted = data.tanggal_lahir.substring(0, 10);
                }
            }
            document.getElementById('detail_ttl').textContent = (data.tempat_lahir ? data.tempat_lahir + ', ' : '') + tglLahirFormatted;
            document.getElementById('detail_jk').textContent = data.jenis_kelamin || '-';
            document.getElementById('detail_agama').textContent = data.agama || '-';
            
            const detailPendTerakhir = document.getElementById('detail_pendidikan_terakhir');
            if (detailPendTerakhir) {
                detailPendTerakhir.textContent = (data.pendidikan_terakhir || '-') + ' (' + (data.nama_sekolah_terakhir || data.institusi_asal || '-') + ')';
            }

            const detailPengalaman = document.getElementById('detail_pengalaman_kerja');
            if (detailPengalaman) {
                detailPengalaman.textContent = data.pengalaman_kerja_tahun ? (data.pengalaman_kerja_tahun + ' Tahun') : 'Fresh Graduate / < 1 Tahun';
            }

            document.getElementById('detail_alamat').textContent = data.alamat_tinggal || '-';


            document.getElementById('detail_catatan_hrd').textContent = data.catatan_hrd || 'Belum ada catatan evaluasi khusus dari HRD.';

            // Populate Riwayat Pendidikan Table (Sinkron 6 Kolom)
            const tbodyPen = document.getElementById('detail_tbody_pendidikan');
            tbodyPen.innerHTML = '';
            if (data.pendidikan && data.pendidikan.length > 0) {
                data.pendidikan.forEach((pen, idx) => {
                    const tr = document.createElement('tr');
                    const thnText = (pen.tahun_masuk && pen.tahun_lulus)
                        ? `${pen.tahun_masuk} – ${pen.tahun_lulus}`
                        : (pen.tahun_lulus || pen.tahun_masuk || '-');
                    const ipkText = pen.nilai_ipk ? Number(pen.nilai_ipk).toFixed(2) : '-';
                    tr.innerHTML = `
                        <td class="text-muted fw-semibold text-center py-3.5 px-3">${idx + 1}</td>
                        <td class="py-3.5 px-3"><span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 px-2.5 py-1.5 fs-8">${pen.jenjang || '-'}</span></td>
                        <td class="fw-bold text-dark py-3.5 px-3">${pen.nama_institusi || '-'}</td>
                        <td class="text-secondary py-3.5 px-3">${pen.jurusan || '-'}</td>
                        <td class="text-secondary text-center py-3.5 px-3">${thnText}</td>
                        <td class="text-center py-3.5 px-3"><span class="badge bg-success bg-opacity-10 text-success border border-success px-2.5 py-1.5 fs-8">${ipkText}</span></td>
                    `;
                    tbodyPen.appendChild(tr);
                });
            } else {
                const tr = document.createElement('tr');
                const ipkText = data.ipk ? Number(data.ipk).toFixed(2) : '-';
                tr.innerHTML = `
                    <td class="text-muted fw-semibold text-center py-3.5 px-3">1</td>
                    <td class="py-3.5 px-3"><span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 px-2.5 py-1.5 fs-8">${data.pendidikan_terakhir || 'S1'}</span></td>
                    <td class="fw-bold text-dark py-3.5 px-3">${data.nama_sekolah_terakhir || data.institusi_asal || '-'}</td>
                    <td class="text-muted fst-italic py-3.5 px-3">Pendidikan Terakhir Utama</td>
                    <td class="text-muted text-center py-3.5 px-3">-</td>
                    <td class="text-center py-3.5 px-3"><span class="badge bg-success bg-opacity-10 text-success border border-success px-2.5 py-1.5 fs-8">${ipkText}</span></td>
                `;
                tbodyPen.appendChild(tr);
            }

            // Populate Lampiran Berkas Dokumen PDF Lamaran (Hanya 1 Lampiran Dokumen untuk Preview)
            const filesContainer = document.getElementById('detail_files_container');
            filesContainer.innerHTML = '';

            const hasBerkasUtama = (data.surat && data.surat.file_surat) || data.file_surat_lamaran || data.file_cv;
            const fileUrl = `/arsip-lamaran/${data.id}/view-file/berkas_lengkap`;

            if (hasBerkasUtama) {
                filesContainer.innerHTML = `
                    <div class="col-12">
                        <div class="p-4 rounded-3 bg-white border border-light-subtle shadow-2xs d-flex align-items-center justify-content-between flex-wrap gap-3">
                            <div class="d-flex align-items-center gap-3">
                                <div class="bg-danger bg-opacity-10 text-danger p-3 rounded-3 d-flex align-items-center justify-content-center" style="width: 52px; height: 52px;">
                                    <i class="bi bi-file-earmark-pdf-fill fs-2"></i>
                                </div>
                                <div>
                                    <h6 class="fw-bold text-dark mb-1">Lampiran Berkas Dokumen Lamaran (PDF)</h6>
                                    <small class="text-muted fs-8">File dokumen PDF gabungan resmi pelamar</small>
                                </div>
                            </div>
                            <div>
                                <a href="${fileUrl}" target="_blank" class="btn btn-danger btn-sm px-4 py-2 rounded-2 fs-7 fw-semibold shadow-xs d-inline-flex align-items-center gap-2">
                                    <i class="bi bi-eye-fill"></i> Preview File PDF
                                </a>
                            </div>
                        </div>
                    </div>
                `;
            } else {
                filesContainer.innerHTML = `
                    <div class="col-12">
                        <div class="p-5 text-center bg-white border border-light-subtle rounded-3 text-muted">
                            <div class="bg-secondary bg-opacity-10 text-secondary p-3 rounded-circle d-inline-flex mb-2" style="width: 48px; height: 48px; align-items: center; justify-content: center;">
                                <i class="bi bi-file-earmark-x fs-4"></i>
                            </div>
                            <h6 class="fw-semibold text-dark mt-2 mb-1 fs-7">Berkas PDF Belum Diunggah</h6>
                            <p class="text-muted fs-8 mb-0">Dokumen PDF lamaran belum diunggah atau tidak tersedia untuk pelamar ini.</p>
                        </div>
                    </div>
                `;
            }
        }

        // Function auto mark-as-read via AJAX
        function markPelamarRead(pelamarId) {
            if (!pelamarId) return;
            const badgeElem = document.getElementById(`badge-baru-${pelamarId}`);
            const rowElem = document.getElementById(`row-pelamar-${pelamarId}`);

            if (badgeElem || rowElem?.classList.contains('border-danger')) {
                fetch(`/arsip-lamaran/${pelamarId}/mark-read`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
                        'Accept': 'application/json',
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if (data.status === 'success') {
                        if (badgeElem) badgeElem.remove();
                        if (rowElem) {
                            rowElem.classList.remove('bg-danger', 'bg-opacity-10', 'border-start', 'border-3', 'border-danger');
                        }

                        const count = data.unread_count;
                        const sidebarBadge = document.getElementById('sidebarPelamarBadge');
                        const navbarBadge = document.getElementById('navbarNotifBadge');

                        if (sidebarBadge) {
                            if (count > 0) {
                                sidebarBadge.textContent = count > 99 ? '99+' : count;
                            } else {
                                sidebarBadge.remove();
                            }
                        }
                        if (navbarBadge) {
                            if (count > 0) {
                                navbarBadge.textContent = count > 99 ? '99+' : count;
                            } else {
                                navbarBadge.remove();
                            }
                        }
                    }
                })
                .catch(err => console.log('Mark read failed:', err));
            }
        }

        // Click handler menu aksi
        document.querySelectorAll('.btn-menu-pelamar').forEach(button => {
            button.addEventListener('click', function () {
                selectedPelamar = JSON.parse(this.getAttribute('data-pelamar'));
                const noSuratAksi = (selectedPelamar.surat && selectedPelamar.surat.nomor_surat) ? selectedPelamar.surat.nomor_surat : (selectedPelamar.nomor_registrasi || '-');
                document.getElementById('menu_aksi_nama').textContent = selectedPelamar.nama_lengkap + ' (' + noSuratAksi + ')';
                markPelamarRead(selectedPelamar.id);
            });
        });

        document.getElementById('btnAksiDetail').addEventListener('click', function () {
            const menuModal = bootstrap.Modal.getInstance(document.getElementById('modalMenuAksiPelamar'));
            if (menuModal) menuModal.hide();

            populateDetailModal(selectedPelamar);
            markPelamarRead(selectedPelamar.id);
            new bootstrap.Modal(document.getElementById('modalDetailPelamar')).show();
        });

        document.getElementById('btnAksiEdit').addEventListener('click', function () {
            const menuModal = bootstrap.Modal.getInstance(document.getElementById('modalMenuAksiPelamar'));
            if (menuModal) menuModal.hide();

            populateEditModal(selectedPelamar);
            markPelamarRead(selectedPelamar.id);
            new bootstrap.Modal(document.getElementById('modalEditPelamar')).show();
        });

        document.getElementById('btnAksiHapus').addEventListener('click', function () {
            const menuModal = bootstrap.Modal.getInstance(document.getElementById('modalMenuAksiPelamar'));
            if (menuModal) menuModal.hide();

            document.getElementById('hapus_nama_pelamar').textContent = selectedPelamar.nama_lengkap;
            document.getElementById('formHapusPelamar').action = `/arsip-lamaran/${selectedPelamar.id}`;
            new bootstrap.Modal(document.getElementById('modalHapusPelamar')).show();
        });

        // Notifikasi Toast jika ada berkas pelamar baru yang belum ditinjau
        @if(($pelamarBaruCount ?? 0) > 0 && !request()->filled('search'))
            if (window.AppToast) {
                setTimeout(() => {
                    window.AppToast.fire({
                        icon: 'info',
                        title: 'Terdapat {{ $pelamarBaruCount }} berkas pelamar baru yang belum ditinjau.'
                    });
                }, 400);
            }
        @endif

        // Search filter real-time untuk Modal Kelola Kategori Posisi Pelamar
        const searchModalKategori = document.getElementById('searchModalKategori');
        if (searchModalKategori) {
            searchModalKategori.addEventListener('input', function () {
                const filter = this.value.toLowerCase().trim();
                const rows = document.querySelectorAll('#tableModalKategori tbody tr.item-kategori-row');
                let visibleCount = 0;

                rows.forEach(row => {
                    const nama = row.querySelector('.kat-nama')?.textContent.toLowerCase() || '';
                    const ket = row.querySelector('.kat-ket')?.textContent.toLowerCase() || '';
                    if (nama.includes(filter) || ket.includes(filter)) {
                        row.style.display = '';
                        visibleCount++;
                    } else {
                        row.style.display = 'none';
                    }
                });

                const noMatchRow = document.getElementById('noMatchingKategoriRow');
                if (noMatchRow) {
                    noMatchRow.style.display = (visibleCount === 0 && rows.length > 0) ? '' : 'none';
                }
            });
        }

        // Tetap buka modal jika ada session open_modal atau error nama_kategori
        @if(session('open_modal') === 'modalKelolaKategori' || $errors->has('nama_kategori'))
            const modalKelolaKategoriEl = document.getElementById('modalKelolaKategori');
            if (modalKelolaKategoriEl) {
                const m = bootstrap.Modal.getInstance(modalKelolaKategoriEl) || new bootstrap.Modal(modalKelolaKategoriEl);
                m.show();
                setTimeout(() => {
                    const input = document.getElementById('inputNamaKategoriPelamar');
                    if (input) input.focus();
                }, 400);
            }
        @endif

        // ==========================================
        // AJAX TAMBAH KATEGORI POSISI (MODAL TETAP TERBUKA & AUTO FOKUS)
        // ==========================================
        const formTambahKategoriPelamar = document.getElementById('formTambahKategoriPelamar');
        const inputNamaKategoriPelamar = document.getElementById('inputNamaKategoriPelamar');
        const inputKeteranganKategoriPelamar = document.getElementById('inputKeteranganKategoriPelamar');
        const btnSubmitKategoriPelamar = document.getElementById('btnSubmitKategoriPelamar');

        if (formTambahKategoriPelamar) {
            formTambahKategoriPelamar.addEventListener('submit', function(e) {
                e.preventDefault();

                const nama = inputNamaKategoriPelamar ? inputNamaKategoriPelamar.value.trim() : '';
                if (!nama) {
                    if (inputNamaKategoriPelamar) inputNamaKategoriPelamar.focus();
                    return;
                }

                if (btnSubmitKategoriPelamar) btnSubmitKategoriPelamar.disabled = true;
                const origHtml = btnSubmitKategoriPelamar ? btnSubmitKategoriPelamar.innerHTML : '';
                if (btnSubmitKategoriPelamar) {
                    btnSubmitKategoriPelamar.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>...';
                }

                const formData = new FormData(formTambahKategoriPelamar);

                fetch(formTambahKategoriPelamar.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(res => res.json().then(data => ({ status: res.status, body: data })))
                .then(result => {
                    if (btnSubmitKategoriPelamar) {
                        btnSubmitKategoriPelamar.disabled = false;
                        btnSubmitKategoriPelamar.innerHTML = origHtml;
                    }

                    if (result.status >= 200 && result.status < 300 && result.body.success) {
                        const newKat = result.body.data;

                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                toast: true,
                                position: 'top-end',
                                icon: 'success',
                                title: 'Kategori posisi berhasil ditambahkan!',
                                showConfirmButton: false,
                                timer: 2000,
                                timerProgressBar: true
                            });
                        }

                        if (inputNamaKategoriPelamar) inputNamaKategoriPelamar.value = '';
                        if (inputKeteranganKategoriPelamar) inputKeteranganKategoriPelamar.value = '';
                        if (inputNamaKategoriPelamar) inputNamaKategoriPelamar.focus();

                        const tbody = document.querySelector('#tableModalKategori tbody');
                        if (tbody) {
                            const emptyRow = document.getElementById('emptyKategoriRow');
                            if (emptyRow) emptyRow.remove();

                            const rows = tbody.querySelectorAll('tr.item-kategori-row');
                            const nextNo = rows.length + 1;

                            const tr = document.createElement('tr');
                            tr.className = 'item-kategori-row';
                            tr.innerHTML = `
                                <td class="text-center text-muted fw-semibold">${nextNo}</td>
                                <td class="fw-bold text-dark kat-nama">${newKat.nama_kategori}</td>
                                <td class="text-muted fs-8 kat-ket">${newKat.keterangan || '-'}</td>
                                <td class="text-center">
                                    <form action="/kategori-pelamar/${newKat.id}" method="POST" class="d-inline formDeleteKategoriPelamar">
                                        <input type="hidden" name="_token" value="${document.querySelector('meta[name="csrf-token"]')?.content || ''}">
                                        <input type="hidden" name="_method" value="DELETE">
                                        <button type="submit" class="btn btn-outline-danger btn-sm py-0 px-2 rounded-2" title="Hapus Kategori">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            `;
                            const noMatchRow = document.getElementById('noMatchingKategoriRow');
                            if (noMatchRow) {
                                tbody.insertBefore(tr, noMatchRow);
                            } else {
                                tbody.appendChild(tr);
                            }

                            const badgeTotal = document.getElementById('badgeTotalKategori');
                            if (badgeTotal) {
                                badgeTotal.textContent = tbody.querySelectorAll('tr.item-kategori-row').length;
                            }
                        }

                        document.querySelectorAll('select[name="kategori_pelamar_id"]').forEach(sel => {
                            const opt = document.createElement('option');
                            opt.value = newKat.id;
                            opt.textContent = newKat.nama_kategori;
                            sel.appendChild(opt);
                        });

                    } else {
                        let errMsg = result.body.message || 'Gagal menambahkan kategori posisi.';
                        if (result.body && result.body.errors && result.body.errors.nama_kategori) {
                            errMsg = result.body.errors.nama_kategori[0];
                        }
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                toast: true,
                                position: 'top-end',
                                icon: 'error',
                                title: errMsg,
                                showConfirmButton: false,
                                timer: 3500,
                                timerProgressBar: true
                            });
                        } else {
                            alert(errMsg);
                        }
                        if (inputNamaKategoriPelamar) inputNamaKategoriPelamar.focus();
                    }
                })
                .catch(err => {
                    if (btnSubmitKategoriPelamar) {
                        btnSubmitKategoriPelamar.disabled = false;
                        btnSubmitKategoriPelamar.innerHTML = origHtml;
                    }
                    console.error(err);
                    formTambahKategoriPelamar.submit();
                });
            });
        }

        // ==========================================
        // HAPUS KATEGORI POSISI TANPA KONFIRMASI (LANGSUNG PROSES & MODAL TETAP TERBUKA)
        // ==========================================
        document.addEventListener('submit', function(e) {
            if (e.target && e.target.classList.contains('formDeleteKategoriPelamar')) {
                e.preventDefault();
                const form = e.target;
                const btn = form.querySelector('button[type="submit"]');
                if (btn) btn.disabled = true;

                fetch(form.action, {
                    method: 'POST',
                    body: new FormData(form),
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(res => res.json().then(data => ({ status: res.status, body: data })))
                .then(result => {
                    if (result.status >= 200 && result.status < 300 && result.body.success) {
                        const tr = form.closest('tr');
                        if (tr) tr.remove();

                        const rows = document.querySelectorAll('#tableModalKategori tbody tr.item-kategori-row');
                        rows.forEach((row, idx) => {
                            const tdNo = row.querySelector('td:first-child');
                            if (tdNo) tdNo.textContent = idx + 1;
                        });

                        const badgeTotal = document.getElementById('badgeTotalKategori');
                        if (badgeTotal) {
                            badgeTotal.textContent = rows.length;
                        }

                        if (rows.length === 0) {
                            const tbody = document.querySelector('#tableModalKategori tbody');
                            const emptyRow = document.createElement('tr');
                            emptyRow.id = 'emptyKategoriRow';
                            emptyRow.innerHTML = `
                                <td colspan="4" class="text-center py-4 text-muted">
                                    <i class="bi bi-inbox text-muted d-block fs-3 mb-1"></i>
                                    Belum ada kategori posisi.
                                </td>
                            `;
                            const noMatchRow = document.getElementById('noMatchingKategoriRow');
                            if (noMatchRow) {
                                tbody.insertBefore(emptyRow, noMatchRow);
                            } else {
                                tbody.appendChild(emptyRow);
                            }
                        }

                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                toast: true,
                                position: 'top-end',
                                icon: 'success',
                                title: 'Kategori posisi berhasil dihapus!',
                                showConfirmButton: false,
                                timer: 2000,
                                timerProgressBar: true
                            });
                        }
                    } else {
                        let errMsg = result.body.message || 'Gagal menghapus kategori posisi.';
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({
                                toast: true,
                                position: 'top-end',
                                icon: 'error',
                                title: errMsg,
                                showConfirmButton: false,
                                timer: 3500,
                                timerProgressBar: true
                            });
                        } else {
                            alert(errMsg);
                        }
                        if (btn) btn.disabled = false;
                    }
                })
                .catch(err => {
                    console.error(err);
                    form.submit();
                });
            }
        });
    });
</script>
@endpush
@endsection