<?= $this->extend('admin-web/layout/template') ?>

<?= $this->section('content') ?>
<div class="p-6 md:p-8 lg:p-10 w-full max-w-screen-2xl mx-auto">

    <div class="mb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h2 class="text-3xl font-extrabold text-gray-900 tracking-tight">Kelola Karir & Pelamar</h2>
            <p class="text-gray-500 mt-2 text-sm">Buka lowongan baru dan kelola data pelamar kerja MIE NYINYIR.</p>
        </div>
        <button onclick="openJobModal()" class="flex items-center justify-center gap-2 bg-[#a11c12] text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-[#a11c12]/30 hover:bg-[#8b1c1c] hover:-translate-y-0.5 transition-all duration-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
            </svg>
            Buka Lowongan
        </button>
    </div>

    <?php if (session()->getFlashdata('success')): ?>
        <div class="flex items-center gap-3 bg-green-50/80 border border-green-200 text-green-700 px-5 py-4 mb-8 rounded-xl shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <p class="font-medium"><?= session()->getFlashdata('success') ?></p>
        </div>
    <?php endif; ?>

    <div class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-gray-100 mb-8 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-[#a11c12] to-[#fbbd42]"></div>
        
        <h3 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3 mt-2">
            <span class="bg-[#faebe6] text-[#a11c12] w-10 h-10 rounded-lg flex items-center justify-center shadow-sm">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
            </span>
            Daftar Lowongan Aktif
        </h3>
        
        <div class="overflow-x-auto rounded-xl border border-gray-200">
            <table class="w-full text-left border-collapse whitespace-nowrap">
                <thead>
                    <tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider border-b border-gray-200">
                        <th class="p-4 font-bold">Posisi</th>
                        <th class="p-4 font-bold">Tipe </th>
                        <th class="p-4 font-bold">Lokasi</th>
                        <th class="p-4 font-bold">Tenggat Waktu</th>
                        <th class="p-4 font-bold text-center">Status</th>
                        <th class="p-4 font-bold text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <?php if(empty($karirList)): ?>
                        <tr>
                            <td colspan="5" class="p-8 text-center text-gray-500 bg-gray-50/50">
                                <div class="flex flex-col items-center justify-center">
                                    <svg class="w-10 h-10 text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" /></svg>
                                    Belum ada lowongan yang dibuka.
                                </div>
                            </td>
                        </tr>
                    <?php endif; ?>
                    <?php foreach($karirList as $k): ?>
                    <tr class="hover:bg-gray-50/80 transition-colors group <?= ($k['is_active'] == 0) ? 'opacity-60 bg-gray-50' : '' ?>">
                        <td class="p-4 font-bold text-gray-800 text-base">
                            <?= esc($k['title']) ?>
                            <?php if($k['is_active'] == 0): ?>
                                <span class="ml-2 bg-gray-200 text-gray-600 text-[9px] px-2 py-0.5 rounded-full uppercase">Ditutup</span>
                            <?php endif; ?>
                        </td>
                        <td class="p-4">
                            <div class="flex flex-col items-start gap-1.5">
                                <span class="bg-[#faebe6] text-[#a11c12] px-2.5 py-1 rounded-md text-[10px] font-extrabold uppercase tracking-widest"><?= esc($k['type']) ?></span>
                            </div>
                        </td>
                        <td class="p-4">
                            <div class="flex flex-col items-start gap-1.5">
                                <span class="text-gray-500 text-sm flex items-center gap-1">
                                    <svg class="h-4 w-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" /></svg>
                                    <?= esc($k['location']) ?>
                                </span>
                            </div>
                        </td>
                        <td class="p-4">
                            <span class="inline-flex items-center gap-1.5 bg-red-50 text-red-600 border border-red-100 px-3 py-1.5 rounded-lg text-sm font-semibold">
                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                <?= esc($k['deadline']) ?>
                            </span>
                        </td>
                        <td class="p-4 text-center">
                            <select onchange="toggleJobStatus(<?= $k['id'] ?>, this.value)" class="text-xs font-bold border-gray-200 rounded-lg focus:ring-[#a11c12] <?= ($k['is_active'] == 1) ? 'text-green-600 bg-green-50' : 'text-gray-500 bg-gray-100' ?>">
                                <option value="1" <?= $k['is_active'] == 1 ? 'selected' : '' ?>>BUKA</option>
                                <option value="0" <?= $k['is_active'] == 0 ? 'selected' : '' ?>>TUTUP</option>
                            </select>
                        </td>
                        <td class="p-4 text-center">
                            <div class="flex items-center justify-center gap-2">
                                <?php $dataJson = htmlspecialchars(json_encode($k), ENT_QUOTES, 'UTF-8'); ?>
                                <button type="button" data-job='<?= $dataJson ?>' onclick="editJobModal(this)" class="bg-gray-100 text-gray-600 hover:bg-blue-100 hover:text-blue-600 px-3 py-2 rounded-lg text-sm font-semibold transition-colors">Edit</button>
                                <form action="<?= base_url('dashboard-adm/karir/delete/' . $k['id']) ?>" method="POST" class="inline m-0" onsubmit="return confirm('Apakah Anda yakin ingin menghapus lowongan ini?');">
                                    <button type="submit" class="bg-gray-100 text-gray-600 hover:bg-red-100 hover:text-red-600 px-3 py-2 rounded-lg text-sm font-semibold transition-colors">Hapus</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>

    <div class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-gray-100 mb-8 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-[#144a2a] to-emerald-400"></div>
        
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 mt-2">
            <h3 class="text-xl font-bold text-gray-800 flex items-center gap-3">
                <span class="bg-green-50 text-[#144a2a] w-10 h-10 rounded-lg flex items-center justify-center shadow-sm">
                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
                </span>
                Daftar Pelamar Masuk
            </h3>
    
            <div class="flex items-center gap-3">
                <select id="filterStatus" onchange="filterPelamar()" class="text-sm border-gray-200 rounded-xl focus:ring-[#144a2a] bg-gray-50">
                    <option value="all">Semua Status</option>
                    <option value="qualified">Qualified</option>
                    <option value="unqualified">Not Qualified</option>
                    <option value="pending">Pending</option>
                </select>
                <select id="sortTanggal" onchange="filterPelamar()" class="text-sm border-gray-200 rounded-xl focus:ring-[#144a2a] bg-gray-50">
                    <option value="desc">Terbaru</option>
                    <option value="asc">Terlama</option>
                </select>
            </div>
        </div>
        
        <div class="overflow-x-auto rounded-xl border border-gray-200">
            <table class="w-full text-left border-collapse whitespace-nowrap" id="tablePelamar">
                <thead>
                    <tr class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider border-b border-gray-200">
                        <th class="p-4 font-bold">Status</th>
                        <th class="p-4 font-bold">Waktu</th>
                        <th class="p-4 font-bold">Nama Pelamar</th>
                        <th class="p-4 font-bold">Posisi Dilamar</th>
                        <th class="p-4 font-bold">Kontak Info</th>
                        <th class="p-4 font-bold text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <?php if(empty($appList)): ?>
                        <tr><td colspan="5" class="p-8 text-center text-gray-400">Belum ada pelamar yang masuk.</td></tr>
                    <?php endif; ?>
    
                    <?php foreach($appList as $app): ?>
                    <tr class="item-pelamar hover:bg-gray-50/80 transition-colors" data-status="<?= $app['status'] ?? 'pending' ?>" data-tanggal="<?= strtotime($app['tgl_apply']) ?>">
                        <td class="p-4">
                            <div class="flex flex-col items-start gap-2">
                                <?php if($app['status'] == 'qualified'): ?>
                                    <span class="bg-green-100 text-green-700 px-2 py-0.5 rounded text-[10px] font-bold uppercase w-fit">Qualified</span>
                                <?php elseif($app['status'] == 'unqualified'): ?>
                                    <span class="bg-red-100 text-red-700 px-2 py-0.5 rounded text-[10px] font-bold uppercase w-fit">Not Qualified</span>
                                <?php else: ?>
                                    <span class="bg-gray-100 text-gray-500 px-2 py-0.5 rounded text-[10px] font-bold uppercase w-fit">Pending</span>
                                <?php endif; ?>
                            </div>
                        </td>
                        
                        <td class="p-4">
                            <div class="flex flex-col items-start gap-2">
                                <span class="text-xs font-semibold text-gray-500 bg-gray-100 px-2.5 py-1 rounded-md">
                                    <?= date('d M Y', strtotime($app['tgl_apply'])) ?>
                                </span>
                                
                            </div>
                        </td>
                        <td class="p-4 font-bold text-gray-800"><?= esc($app['nama']) ?></td>
                        <td class="p-4 font-semibold text-[#a11c12]"><?= esc($app['posisi']) ?></td>
                        <td class="p-4 text-sm text-gray-600">
                            <div class="flex flex-col gap-1">
                                <a href="tel:<?= esc($app['telepon']) ?>" class="hover:text-green-700 flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg><?= esc($app['telepon']) ?></a>
                                <a href="mailto:<?= esc($app['email']) ?>" class="hover:text-blue-600 flex items-center gap-1"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg><?= esc($app['email']) ?></a>
                            </div>
                        </td>
                        <td class="p-4 text-center">
                            <div class="flex items-center justify-center gap-2">
                                <select onchange="updateStatusPelamar(<?= $app['id'] ?>, this.value)" class="text-xs border-gray-200 rounded-lg focus:ring-[#144a2a]">
                                    <option value="pending" <?= ($app['status'] == 'pending') ? 'selected' : '' ?>>Pending</option>
                                    <option value="qualified" <?= ($app['status'] == 'qualified') ? 'selected' : '' ?>>Qualified</option>
                                    <option value="unqualified" <?= ($app['status'] == 'unqualified') ? 'selected' : '' ?>>Not Qualified</option>
                                </select>
                                <a href="<?= base_url('uploads/pelamar/' . $app['berkas']) ?>" target="_blank" class="p-2 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100" title="Unduh Berkas">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                </a>
                                <button type="button" 
                                        onclick="previewCV('<?= base_url('uploads/pelamar/' . $app['berkas']) ?>')" 
                                        class="p-2 bg-purple-50 text-purple-600 rounded-lg hover:bg-purple-100" 
                                        title="Preview CV">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                </button>
                                <form action="<?= base_url('dashboard-adm/karir/delete-pelamar/' . $app['id']) ?>" method="POST" class="m-0" onsubmit="return confirm('Hapus data pelamar ini?')">
                                    <button type="submit" class="p-2 text-red-600 bg-red-50 rounded-lg hover:bg-red-100">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="jobModal" class="hidden fixed inset-0 z-[150] overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-center justify-center min-h-screen p-4 text-center sm:p-0">
        <div class="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity" onclick="closeJobModal()" aria-hidden="true"></div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        <div id="jobModalBox" class="relative inline-block align-bottom bg-white rounded-3xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle w-full max-w-4xl opacity-0 scale-95 duration-200">
            <div class="absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-[#a11c12] to-[#fbbd42]"></div>

            <form action="<?= base_url('dashboard-adm/karir/save') ?>" method="POST" enctype="multipart/form-data" class="m-0 flex flex-col max-h-[90vh]">
                <input type="hidden" name="id" id="inputId">

                <button type="button" onclick="closeJobModal()" class="absolute top-4 right-4 text-gray-400 hover:text-red-500 hover:bg-red-50 p-2 rounded-full transition-colors z-20">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
                </button>

                <div class="px-6 md:px-8 pt-8 pb-6 border-b border-gray-100 bg-gray-50/50 shrink-0">
                    <div class="flex flex-col sm:flex-row gap-6 items-end">
                        
                        <div class="relative w-32 h-32 shrink-0 group">
                            <div class="w-full h-full rounded-2xl border-2 border-dashed border-gray-300 overflow-hidden bg-white flex items-center justify-center hover:border-[#a11c12] transition-colors relative z-0">
                                <img id="imagePreview" src="" class="hidden w-full h-full object-cover">
                                <div id="imagePlaceholder" class="text-center text-gray-400 group-hover:text-[#a11c12] transition-colors">
                                    <svg class="mx-auto h-8 w-8 mb-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                                    <span class="text-[10px] font-bold uppercase tracking-wider">Foto</span>
                                </div>
                            </div>
                            <input type="file" name="image" accept="image/*" onchange="previewImage(this)" class="absolute inset-0 opacity-0 cursor-pointer z-10">
                            <div class="absolute -bottom-2 -right-2 bg-[#a11c12] text-white p-2 rounded-full shadow-lg pointer-events-none z-20">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
                            </div>
                        </div>

                        <div class="flex-1 w-full">
                            <label id="modalTitleLabel" class="block text-xs font-black text-gray-400 uppercase tracking-widest mb-2">Tambah Lowongan Baru</label>
                            <input type="text" name="title" id="inputTitle" required class="w-full text-2xl md:text-3xl font-black text-gray-800 bg-transparent border-b-2 border-gray-200 focus:border-[#a11c12] focus:ring-0 outline-none pb-2 transition-all placeholder:text-gray-300" placeholder="Judul Posisi (Misal: Kasir)">
                        </div>
                    </div>
                </div>

                <div class="p-6 md:p-8 overflow-y-auto space-y-6 flex-1 bg-white">
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">Tipe Pekerjaan</label>
                            <select name="type" id="inputType" required class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-[#a11c12]/20 focus:border-[#a11c12] outline-none transition-all appearance-none cursor-pointer">
                                <option value="" disabled selected>-- Pilih Tipe Pekerjaan --</option>
                                <option value="Full Time">Full Time</option>
                                <option value="Part Time">Part Time</option>
                                <option value="Event">Event / Freelance</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">Lokasi Penempatan</label>
                            <select name="location" id="inputLocation" required class="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-[#a11c12]/20 focus:border-[#a11c12] outline-none transition-all appearance-none cursor-pointer">
                                <option value="" disabled selected>-- Pilih Lokasi Penempatan --</option>
                                <?php if(isset($list_toko) && is_array($list_toko)): ?>
                                    <?php foreach($list_toko as $nama_toko): ?>
                                        <option value="<?= esc($nama_toko) ?>"><?= esc($nama_toko) ?></option>
                                    <?php endforeach; ?>
                                <?php endif; ?>
                                <option value="Head Office / Pusat">Head Office / Pusat</option>
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">Tenggat Waktu</label>
                            <div class="flex gap-2">
                                <input type="text" name="deadline" id="inputDeadline" required class="flex-1 px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-[#a11c12]/20 focus:border-[#a11c12] outline-none transition-all" placeholder="Pilih tanggal / Segera">
                                
                                <div class="relative w-12 shrink-0">
                                    <input type="date" onchange="document.getElementById('inputDeadline').value = this.value" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
                                    <div class="w-full h-full bg-gray-100 border border-gray-200 rounded-xl flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                    </div>
                                </div>
                                
                                <button type="button" onclick="setSegera()" class="shrink-0 px-4 py-3 bg-amber-100 text-amber-700 border border-amber-200 rounded-xl font-bold text-xs uppercase hover:bg-amber-200 transition-colors">Segera</button>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">Deskripsi Singkat</label>
                            <textarea name="short_desc" id="inputShortDesc" rows="1" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-[#a11c12]/20 focus:border-[#a11c12] outline-none resize-none" placeholder="Teks yang muncul di kotak depan..."></textarea>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">Tugas & Tanggung Jawab <span class="text-xs font-normal text-gray-400 ml-1">(Gunakan ENTER untuk baris baru)</span></label>
                            <textarea name="jobdesc" id="inputJobdesc" rows="5" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-[#a11c12]/20 focus:border-[#a11c12] outline-none leading-relaxed" placeholder="- Memasak hidangan&#10;- Melayani pelanggan"></textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">Kualifikasi <span class="text-xs font-normal text-gray-400 ml-1">(Gunakan ENTER untuk baris baru)</span></label>
                            <textarea name="kualifikasi" id="inputKualifikasi" rows="5" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-[#a11c12]/20 focus:border-[#a11c12] outline-none leading-relaxed" placeholder="- Pria/Wanita maksimal 25 tahun&#10;- Berpengalaman di F&B"></textarea>
                        </div>
                    </div>
                </div>

                <div class="px-6 md:px-8 py-5 bg-gray-50 border-t border-gray-100 shrink-0 flex justify-end gap-3 rounded-b-3xl">
                    <button type="button" onclick="closeJobModal()" class="px-6 py-3 text-gray-600 hover:bg-gray-200 rounded-xl font-bold transition-all uppercase text-xs tracking-widest">Batal</button>
                    <button type="submit" class="bg-[#a11c12] text-white px-8 py-3 rounded-xl font-black shadow-lg shadow-[#a11c12]/30 hover:bg-[#8b1c1c] hover:-translate-y-0.5 transition-all uppercase text-sm tracking-widest flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        Simpan Lowongan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--Modal Prev Berkas-->
<div id="cvPreviewModal" class="hidden fixed inset-0 z-[200] overflow-hidden">
    <div class="fixed inset-0 bg-black/80 backdrop-blur-sm" onclick="closePreviewModal()"></div>
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-5xl h-[90vh] flex flex-col overflow-hidden transform transition-all">
            <div class="px-6 py-4 border-b flex justify-between items-center bg-gray-50">
                <h3 class="font-bold text-gray-800 flex items-center gap-2">Preview Berkas</h3>
                <button onclick="closePreviewModal()" class="text-gray-400 hover:text-red-500 text-3xl leading-none">&times;</button>
            </div>
            <div class="flex-1 bg-gray-200">
                <iframe id="cvFrame" src="" class="w-full h-full" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>

<script>
    // Pastikan fungsi ini ada di dalam tag <script> Anda
   function previewCV(url) {
        const modal = document.getElementById('cvPreviewModal');
        const frame = document.getElementById('cvFrame');
        
        // Ambil ekstensi file dari URL (misal: pdf, doc, docx)
        const extension = url.split('.').pop().toLowerCase();
        
        if (extension === 'pdf' || extension === 'jpg' || extension === 'png') {
            // File PDF dan Gambar bisa langsung dibaca oleh browser
            frame.src = url;
        } else if (extension === 'doc' || extension === 'docx') {
            // File Word harus dialihkan menggunakan Google Docs Viewer
            // Catatan: Ini membutuhkan koneksi internet dan website Anda harus sudah online (bukan localhost)
            const googleViewerUrl = `https://docs.google.com/gview?url=${encodeURIComponent(url)}&embedded=true`;
            frame.src = googleViewerUrl;
        } else {
            // Jika pelamar mengupload .zip atau .rar
            alert(`Format file .${extension} tidak mendukung fitur preview langsung. Silakan gunakan tombol Download (ikon panah ke bawah).`);
            return; // Hentikan fungsi agar modal tidak terbuka kosong
        }
        
        // Tampilkan modal
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closePreviewModal() {
        document.getElementById('cvPreviewModal').classList.add('hidden');
        document.getElementById('cvFrame').src = ''; 
        document.body.style.overflow = 'auto';
    }
</script>
<script>
    
    // --- FUNGSI MODAL LOWONGAN ---
    function openJobModal() {
        const modal = document.getElementById('jobModal');
        const modalBox = document.getElementById('jobModalBox');
        
        // Reset Form & ID
        document.getElementById('inputId').value = '';
        document.querySelector('#jobModal form').reset();
        
        // Reset Gambar Preview
        document.getElementById('imagePreview').classList.add('hidden');
        document.getElementById('imagePreview').src = '';
        document.getElementById('imagePlaceholder').classList.remove('hidden');
        
        document.getElementById('modalTitleLabel').innerText = 'Tambah Lowongan Baru';
        
        // Tampilkan Modal dengan Transisi
        modal.classList.remove('hidden');
        setTimeout(() => {
            modalBox.classList.remove('opacity-0', 'scale-95');
            modalBox.classList.add('opacity-100', 'scale-100');
        }, 10);
        document.body.style.overflow = 'hidden'; // Kunci scroll layar utama
    }

    function editJobModal(btnElement) {
        const data = JSON.parse(btnElement.getAttribute('data-job'));
        const modal = document.getElementById('jobModal');
        const modalBox = document.getElementById('jobModalBox');
        
        // Isi Form
        document.getElementById('inputId').value = data.id;
        document.getElementById('inputTitle').value = data.title;
        document.getElementById('inputType').value = data.type;
        document.getElementById('inputLocation').value = data.location;
        document.getElementById('inputDeadline').value = data.deadline;
        document.getElementById('inputShortDesc').value = data.short_desc;
        document.getElementById('inputJobdesc').value = data.jobdesc;
        document.getElementById('inputKualifikasi').value = data.kualifikasi;

        // Preview Gambar jika ada
        const preview = document.getElementById('imagePreview');
        const placeholder = document.getElementById('imagePlaceholder');
        if(data.image) {
            preview.src = '<?= base_url('uploads/karir/') ?>' + data.image;
            preview.classList.remove('hidden');
            placeholder.classList.add('hidden');
        } else {
            preview.src = '';
            preview.classList.add('hidden');
            placeholder.classList.remove('hidden');
        }

        document.getElementById('modalTitleLabel').innerText = 'Edit Lowongan Kerja';
        
        // Tampilkan Modal dengan Transisi
        modal.classList.remove('hidden');
        setTimeout(() => {
            modalBox.classList.remove('opacity-0', 'scale-95');
            modalBox.classList.add('opacity-100', 'scale-100');
        }, 10);
        document.body.style.overflow = 'hidden';
    }

    function closeJobModal() {
        const modal = document.getElementById('jobModal');
        const modalBox = document.getElementById('jobModalBox');
        
        // Transisi Keluar
        modalBox.classList.remove('opacity-100', 'scale-100');
        modalBox.classList.add('opacity-0', 'scale-95');
        
        setTimeout(() => {
            modal.classList.add('hidden');
            document.body.style.overflow = 'auto'; // Buka scroll layar utama
        }, 200); 
    }

    // Fungsi Preview Gambar Upload
    function previewImage(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('imagePreview').src = e.target.result;
                document.getElementById('imagePreview').classList.remove('hidden');
                document.getElementById('imagePlaceholder').classList.add('hidden');
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    // Fungsi Set Tanggal 'Segera'
    function setSegera() {
        document.getElementById('inputDeadline').value = "Segera";
    }

    // --- FUNGSI UPDATE STATUS LOWONGAN BUKA/TUTUP ---
    function toggleJobStatus(id, status) {
        fetch(`<?= base_url('dashboard-adm/karir/toggle-status/') ?>${id}/${status}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload(); 
            } else {
                alert('Gagal memperbarui status lowongan.');
            }
        })
        .catch(error => console.error('Error:', error));
    }

    // --- FUNGSI PELAMAR ---
    function updateStatusPelamar(id, status) {
        if (status === "") return;
        fetch(`<?= base_url('dashboard-adm/karir/update-status/') ?>${id}/${status}`, { method: 'GET' })
        .then(response => response.json())
        .then(data => {
            if (data.success) location.reload();
            else alert('Gagal memperbarui status pelamar');
        })
        .catch(error => console.error('Error:', error));
    }

    function filterPelamar() {
        const statusFilter = document.getElementById('filterStatus').value;
        const sortOrder = document.getElementById('sortTanggal').value;
        const tbody = document.querySelector('#tablePelamar tbody');
        const rows = Array.from(tbody.querySelectorAll('.item-pelamar'));
    
        rows.forEach(row => {
            const rowStatus = row.getAttribute('data-status');
            row.style.display = (statusFilter === 'all' || rowStatus === statusFilter) ? '' : 'none';
        });
    
        rows.sort((a, b) => {
            const dateA = parseInt(a.getAttribute('data-tanggal'));
            const dateB = parseInt(b.getAttribute('data-tanggal'));
            return sortOrder === 'asc' ? dateA - dateB : dateB - dateA;
        });
    
        rows.forEach(row => tbody.appendChild(row));
    }
</script>
<?= $this->endSection() ?>