<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<title>Input Data Pekerjaan</title>

<!-- Sertakan CSS Quill -->
<link
href="https://cdn.quilljs.com/1.3.7/quill.snow.css"
rel="stylesheet"
/>

<!-- CSS untuk mempercantik UI/UX -->
<style>
/* Gaya umum */
body {
font-family: Arial, sans-serif;
margin: 20px;
line-height: 1.5;
background-color: #f8f9fa;
color: #343a40;
}

/* Gaya untuk formulir dan elemen form */
#jobForm {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin-bottom: 20px;
}

#jobForm h2 {
margin-bottom: 20px;
color: #007bff;
}

/* Gaya untuk label dan input */
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #495057;
}

input[type="text"],
input[type="url"],
input[type="number"],
input[type="datetime-local"],
textarea {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ced4da;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
color: #495057;
}

/* Gaya untuk textarea */
textarea {
height: 150px;
resize: vertical;
}

#descriptionEditor {
height: 300px; /* Meningkatkan tinggi editor deskripsi pekerjaan */
margin-bottom: 15px;
border: 1px solid #ced4da;
}

/* Gaya untuk tombol */
button {
background-color: #007bff;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #0056b3;
}

/* Bagian output RDFa/JSON-LD */
#outputSection {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 600px;
}

#outputSection h2 {
margin-bottom: 20px;
color: #007bff;
}

/* Mengatur elemen <pre> untuk menampilkan kode RDFa atau JSON-LD */
pre {
background-color: #f1f3f5;
padding: 10px;
border-radius: 4px;
overflow-x: auto;
white-space: pre-wrap;
}

/* Gaya untuk tombol menyalin dan mengekspor hasil RDFa/JSON-LD */
#buttons {
margin-top: 20px;
}

#buttons button {
margin-right: 10px;
}

/* Tambahkan padding pada logo perusahaan */
.company-logo {
padding: 8px;
border-radius: 4px;
max-width: 200px;
max-height: 100px;
}
</style>
</head>

<body>
<!-- Formulir input data pekerjaan -->
<form id="jobForm">
<h2>Input Data Pekerjaan</h2>

<!-- Input Tanggal Diposting -->
<div>
<label for="datePosted">Tanggal Diposting:</label>
<input
type="datetime-local"
id="datePosted"
name="datePosted"
required
/>
</div>

<!-- Input Batas Akhir Lamaran -->
<div>
<label for="validThrough">Batas Akhir Lamaran:</label>
<input
type="datetime-local"
id="validThrough"
name="validThrough"
required
/>
</div>

<!-- Input Judul Pekerjaan -->
<div>
<label for="title">Judul Pekerjaan:</label>
<input type="text" id="title" name="title" required />
</div>

<!-- Input Deskripsi Pekerjaan -->
<div>
<label for="description">Deskripsi Pekerjaan:</label>
<div id="descriptionEditor"></div>
</div>

<!-- Input Tipe Pekerjaan -->
<div>
<label for="employmentType">Tipe Pekerjaan:</label>
<input type="text" id="employmentType" name="employmentType" required />
</div>

<!-- Input Nama Perusahaan -->
<div>
<label for="hiringOrganizationName">Nama Perusahaan:</label>
<input
type="text"
id="hiringOrganizationName"
name="hiringOrganizationName"
required
/>
</div>

<!-- Input URL Perusahaan -->
<div>
<label for="hiringOrganizationUrl">URL Perusahaan:</label>
<input
type="url"
id="hiringOrganizationUrl"
name="hiringOrganizationUrl"
required
/>
</div>

<!-- Input Logo Perusahaan -->
<div>
<label for="hiringOrganizationLogo">Logo Perusahaan (URL):</label>
<input
type="url"
id="hiringOrganizationLogo"
name="hiringOrganizationLogo"
placeholder="https://example.com/logo.png"
/>
</div>

<!-- Input Lokasi Pekerjaan -->
<div>
<h3>Lokasi Pekerjaan</h3>
<div>
<label for="streetAddress">Alamat:</label>
<input type="text" id="streetAddress" name="streetAddress" required />
</div>
<div>
<label for="addressLocality">Kota:</label>
<input
type="text"
id="addressLocality"
name="addressLocality"
required
/>
</div>
<div>
<label for="addressRegion">Provinsi:</label>
<input type="text" id="addressRegion" name="addressRegion" required />
</div>
<div>
<label for="postalCode">Kode Pos:</label>
<input type="number" id="postalCode" name="postalCode" required />
</div>
<div>
<label for="addressCountry">Negara:</label>
<input
type="text"
id="addressCountry"
name="addressCountry"
required
/>
</div>
</div>

<!-- Input Mata Uang Gaji -->
<div>
<label for="baseSalaryCurrency">Mata Uang Gaji:</label>
<input
type="text"
id="baseSalaryCurrency"
name="baseSalaryCurrency"
required
/>
</div>

<!-- Input Gaji Pokok -->
<div>
<label for="baseSalaryValue">Gaji Pokok:</label>
<input
type="number"
id="baseSalaryValue"
name="baseSalaryValue"
required
/>
</div>

<!-- Input Langsung Melamar -->
<div>
<label for="directApply">Langsung Melamar?</label>
<input type="checkbox" id="directApply" name="directApply" />
</div>

<!-- Input Metode Pelamaran -->
<div>
<label for="applyMethod">Metode Pelamaran:</label>
<select id="applyMethod" name="applyMethod" required>
<option value="email">Email</option>
<option value="website">Website</option>
<option value="phone">Nomor Handphone</option>
<option value="whatsapp">WhatsApp</option>
</select>
</div>

<!-- Input Informasi Kontak -->
<div id="applyInfoSection">
<label for="applyInfo">Informasi Kontak:</label>
<input
type="text"
id="applyInfo"
name="applyInfo"
placeholder="Masukkan kontak pelamaran"
required
/>
</div>

<!-- Pilih Format Output -->
<div>
<label for="outputFormat">Format Output:</label>
<select id="outputFormat" name="outputFormat" required>
<option value="rdfa">RDFa</option>
<option value="json-ld">JSON-LD</option>
</select>
</div>

<!-- Tombol Buat RDFa/JSON-LD -->
<button type="submit">Buat RDFa/JSON-LD</button>
</form>

<!-- Bagian untuk menampilkan markup RDFa/JSON-LD -->
<div id="outputSection">
<h2>Hasil Markup RDFa/JSON-LD:</h2>
<pre id="outputPre"></pre>
<div id="buttons">
<button onclick="copyToClipboard()">Salin ke Clipboard</button>
<button onclick="exportToFile()">Unduh ke File</button>
</div>
</div>

<!-- Sertakan Quill.js -->
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>

<!-- Sertakan JavaScript -->
<script>
// Inisialisasi editor Quill untuk deskripsi pekerjaan
const quill = new Quill("#descriptionEditor", {
theme: "snow",
modules: {
toolbar: [
[{ header: [1, 2, false] }],
["bold", "italic", "underline", "strike"],
["blockquote", "code-block"],
[{ list: "ordered" }, { list: "bullet" }],
["link", "image"],
],
},
})

function formatDateToIndonesian(isoString) {
if (!isoString) return "Tidak Tersedia"

// Hapus bagian 'T' dan tambahkan ':00' jika perlu (untuk parsing yang aman)
const dateString = isoString.replace("T", " ")
const date = new Date(dateString)

// Opsi format Bahasa Indonesia (WIB)
const options = {
weekday: "long", // Hari: Senin
day: "numeric", // Tanggal: 6
month: "long", // Bulan: Oktober
year: "numeric", // Tahun: 2025
// hour: "2-digit", // Jam: 22
// minute: "2-digit", // Menit: 14
// hour12: false, // Format 24 jam
timeZone: "Asia/Jakarta", // Penting untuk memastikan waktu lokal yang benar (WIB)
}

return date.toLocaleString("id-ID", options)
}

// Fungsi untuk membuat markup RDFa berdasarkan data pekerjaan yang diinput pengguna
function createRdfaFromForm(form) {
const datePosted = form.datePosted.value
const validThrough = form.validThrough.value
const title = form.title.value
const description = quill.root.innerHTML // Baca deskripsi pekerjaan dari Quill
const employmentType = form.employmentType.value
const hiringOrganizationName = form.hiringOrganizationName.value
const hiringOrganizationUrl = form.hiringOrganizationUrl.value
const hiringOrganizationLogo = form.hiringOrganizationLogo.value
const streetAddress = form.streetAddress.value
const addressLocality = form.addressLocality.value
const addressRegion = form.addressRegion.value
const postalCode = form.postalCode.value
const addressCountry = form.addressCountry.value
const baseSalaryCurrency = form.baseSalaryCurrency.value
const baseSalaryValue = form.baseSalaryValue.value
const directApply = form.directApply.checked
const applyMethod = form.applyMethod.value
const applyInfo = form.applyInfo.value

const formattedValidThrough = formatDateToIndonesian(validThrough)

const rdfaHtml = `
<div vocab="http://schema.org/" typeof="JobPosting">
<meta property="datePosted" content="${datePosted}:00+07:00">
<meta property="validThrough" content="${validThrough}:00+07:00">
<span property="title" style="display:block; font-size: 1.5em; font-weight: bold; margin-bottom: 10px;">${title}</span>

<div property="hiringOrganization" typeof="Organization" style="display: flex; align-items: center; margin-bottom: 20px;">
<img property="logo" src="${hiringOrganizationLogo}" alt="Logo ${hiringOrganizationName}" class="company-logo" style="margin-right: 15px; border: 1px solid #ddd; padding: 5px;">
<div>
<span property="name" style="font-weight: bold; display: block;">${hiringOrganizationName}</span>
<a property="url" href="${hiringOrganizationUrl}" style="color: #007bff; text-decoration: none;">Kunjungi Website Perusahaan</a>
</div>
</div>

<h3 style="color: #495057; border-bottom: 1px solid #ced4da; padding-bottom: 5px; margin-top: 20px;">Deskripsi Pekerjaan:</h3>
<div property="description" style="line-height: 1.8; margin-bottom: 20px;">
${description}
</div>

<h3 style="color: #495057; border-bottom: 1px solid #ced4da; padding-bottom: 5px;">Detail Pekerjaan:</h3>
<ul style="list-style: none; padding-left: 0;">
<li style="margin-bottom: 8px;"><strong>Tipe Pekerjaan:</strong> <span property="employmentType">${employmentType}</span></li>
<li style="margin-bottom: 8px;"><strong>Batas Akhir Lamaran:</strong> ${formattedValidThrough}</li>
<li style="margin-bottom: 8px;"><strong>Aplikasi Langsung:</strong> <meta property="directApply" content="${directApply}"> ${
directApply ? "Ya" : "Tidak"
}</li>
</ul>

<div property="jobLocation" typeof="Place" style="margin-top: 20px;">
<h4 style="color: #495057;">Lokasi:</h4>
<div property="address" typeof="PostalAddress">
<span property="addressLocality">${addressLocality}</span>,
<span property="addressRegion">${addressRegion}</span>,
<span property="addressCountry">${addressCountry}</span>
(<span property="postalCode">${postalCode}</span>)
<meta property="streetAddress" content="${streetAddress}">
</div>
</div>

<div property="baseSalary" typeof="MonetaryAmount" style="margin-top: 20px;">
<h4 style="color: #495057;">Gaji:</h4>
<span property="currency" style="font-weight: bold;">${baseSalaryCurrency}</span>
<div property="value" typeof="QuantitativeValue" style="display: inline;">
<span property="value">${new Intl.NumberFormat("id-ID").format(
baseSalaryValue
)}</span>
per <span property="unitText">Bulan</span>
</div>
</div>
`

// Buat markup RDFa
// const rdfaHtml = `
// <div vocab="http://schema.org/" typeof="JobPosting">
// <meta property="datePosted" content="${datePosted}">
// <meta property="validThrough" content="${validThrough}">
// <h2>Posisi Pekerjaan</h2>
// <span property="title">${title}</span>
// <div property="description">
// ${description}
// </div>
// <meta property="employmentType" content="${employmentType}">
// <div property="hiringOrganization" typeof="Organization">
// <span property="name">${hiringOrganizationName}</span>
// <a property="url" href="${hiringOrganizationUrl}">Lihat semua lowongan kerja</a>
// <img src="${hiringOrganizationLogo}" alt="${hiringOrganizationName}" class="company-logo">
// </div>
// <div property="jobLocation" typeof="Place">
// <h3>Lokasi Pekerjaan:</h3>
// <div property="address" typeof="PostalAddress">
// <span property="streetAddress">${streetAddress}</span>
// <span property="addressLocality">${addressLocality}</span>
// <span property="addressRegion">${addressRegion}</span>
// <span property="postalCode">${postalCode}</span>
// <span property="addressCountry">${addressCountry}</span>
// </div>
// </div>
// <meta property="directApply" content="${directApply}">
// <div property="baseSalary" typeof="MonetaryAmount">
// <h3>Gaji:</h3>
// <span property="currency">${baseSalaryCurrency}</span>
// <div property="value" typeof="QuantitativeValue">
// <span property="value">${baseSalaryValue}</span>
// <span property="unitText">Per bulan</span>
// </div>
// </div>
// <div>
// <h3>Cara Melamar Pekerjaan:</h3>
// <p>Metode Pelamaran: ${applyMethod}</p>
// <p>Informasi Kontak: ${applyInfo}</p>
// </div>
// </div>
// `

return rdfaHtml
}

// Fungsi untuk membuat markup JSON-LD dari data pekerjaan yang diinput pengguna
function createJsonLdFromForm(form) {
const datePosted = form.datePosted.value
const validThrough = form.validThrough.value
const title = form.title.value
const description = quill.root.innerHTML
const employmentType = form.employmentType.value
const hiringOrganizationName = form.hiringOrganizationName.value
const hiringOrganizationUrl = form.hiringOrganizationUrl.value
const hiringOrganizationLogo = form.hiringOrganizationLogo.value
const streetAddress = form.streetAddress.value
const addressLocality = form.addressLocality.value
const addressRegion = form.addressRegion.value
const postalCode = form.postalCode.value
const addressCountry = form.addressCountry.value
const baseSalaryCurrency = form.baseSalaryCurrency.value
const baseSalaryValue = form.baseSalaryValue.value
const directApply = form.directApply.checked
const applyMethod = form.applyMethod.value
const applyInfo = form.applyInfo.value

// Buat objek JSON-LD
const jsonLdObject = {
"@context": "https://schema.org",
"@type": "JobPosting",
datePosted: datePosted,
validThrough: validThrough,
title: title,
description: description,
employmentType: employmentType,
hiringOrganization: {
"@type": "Organization",
name: hiringOrganizationName,
url: hiringOrganizationUrl,
logo: hiringOrganizationLogo,
},
jobLocation: {
"@type": "Place",
address: {
"@type": "PostalAddress",
streetAddress: streetAddress,
addressLocality: addressLocality,
addressRegion: addressRegion,
postalCode: postalCode,
addressCountry: addressCountry,
},
},
directApply: directApply,
baseSalary: {
"@type": "MonetaryAmount",
currency: baseSalaryCurrency,
value: baseSalaryValue,
},
applicationContact: {
"@type": applyMethod === "email" ? "ContactPoint" : "PostalAddress",
[applyMethod === "email" ? "email" : "telephone"]: applyInfo,
},
}

// Konversi JSON-LD object menjadi string dengan indentasi
const jsonLdString = JSON.stringify(jsonLdObject, null, 2)

return jsonLdString
}

// Fungsi untuk menampilkan markup RDFa atau JSON-LD
function displayMarkup(form) {
const outputFormat = form.outputFormat.value // Mendapatkan pilihan format output (RDFa atau JSON-LD)
let markup = ""

// Buat markup berdasarkan pilihan format output
if (outputFormat === "rdfa") {
markup = createRdfaFromForm(form)
} else if (outputFormat === "json-ld") {
markup = createJsonLdFromForm(form)
}

// Tampilkan markup di elemen outputPre
document.getElementById("outputPre").innerText = markup
}

// Fungsi untuk menyalin markup ke clipboard
function copyToClipboard() {
const outputPre = document.getElementById("outputPre")
const range = document.createRange()
range.selectNode(outputPre)
const selection = window.getSelection()
selection.removeAllRanges()
selection.addRange(range)
document.execCommand("copy")
selection.removeAllRanges()
alert("Markup berhasil disalin ke clipboard!")
}

// Fungsi untuk mengekspor markup ke file
function exportToFile() {
const outputPre = document.getElementById("outputPre")
const markup = outputPre.innerText
const blob = new Blob([markup], { type: "text/plain" })

// Buat URL blob
const url = URL.createObjectURL(blob)

// Buat elemen link untuk pengunduhan
const link = document.createElement("a")
link.href = url
link.download = "markup.txt" // Anda dapat mengubah nama file sesuai kebutuhan
link.click()

// Lepaskan URL blob
URL.revokeObjectURL(url)
}

// Event handler untuk formulir
const form = document.getElementById("jobForm")
form.addEventListener("submit", function (event) {
event.preventDefault() // Cegah form dari pengiriman
displayMarkup(form) // Tampilkan markup RDFa/JSON-LD
})

// Fungsi untuk menyesuaikan input kontak pelamar berdasarkan metode pelamaran
function adjustApplyInfo() {
const applyMethod = document.getElementById("applyMethod").value
const applyInfo = document.getElementById("applyInfo")
const label = document.querySelector('label[for="applyInfo"]')
label.textContent =
applyMethod === "email"
? "Alamat Email:"
: applyMethod === "website"
? "URL Website:"
: applyMethod === "phone"
? "Nomor Handphone:"
: "Nomor WhatsApp:"
applyInfo.placeholder = `Masukkan ${label.textContent.toLowerCase()}`
}

// Event listener untuk perubahan metode pelamaran
document
.getElementById("applyMethod")
.addEventListener("change", adjustApplyInfo)

// Sesuaikan input kontak pelamar saat pertama kali halaman dimuat
adjustApplyInfo()
</script>
</body>
</html>

<!--
// Fungsi untuk mengisi formulir dengan data mock
function autofillMockData() {
const form = document.getElementById('jobForm');

// 1. Data Waktu
// Set waktu saat ini untuk datePosted dan 1 minggu kemudian untuk validThrough
const now = new Date();
const postedTime = now.toISOString().slice(0, 16); // YYYY-MM-DDThh:mm

const validUntil = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000); // +7 hari
const validThroughTime = validUntil.toISOString().slice(0, 16);

form.datePosted.value = postedTime;
form.validThrough.value = validThroughTime;

// 2. Data Pekerjaan
form.title.value = "Pengembang Web Full Stack (Senior)";
form.employmentType.value = "FULL_TIME";

// Isi Quill Editor (Deskripsi Pekerjaan)
const mockDescription = `
<h2>Tanggung Jawab Utama</h2>
<ol>
<li>Mengembangkan dan memelihara aplikasi web menggunakan Next.js/React.</li>
<li>Bekerja sama dengan tim desain untuk implementasi UI/UX.</li>
<li>Mengoptimalkan aplikasi untuk performa dan skalabilitas.</li>
</ol>
<p><strong>Kualifikasi Minimum:</strong></p>
<ul>
<li>Pengalaman minimal 5 tahun di bidang terkait.</li>
<li>Mahir dalam JavaScript, React, dan Node.js.</li>
</ul>
<blockquote>Kirim lamaran Anda sebelum batas waktu!</blockquote>
`;
quill.root.innerHTML = mockDescription;

// 3. Data Organisasi
form.hiringOrganizationName.value = "GlobalTech Solutions";
form.hiringOrganizationUrl.value = "https://globaltech.id";
form.hiringOrganizationLogo.value = "https://picsum.photos/200/100?random=1";

// 4. Data Lokasi
form.streetAddress.value = "Jalan Jend. Sudirman No. 10";
form.addressLocality.value = "Jakarta Selatan";
form.addressRegion.value = "DKI Jakarta";
form.postalCode.value = "12190";
form.addressCountry.value = "ID"; // Indonesia

// 5. Data Gaji
form.baseSalaryCurrency.value = "IDR";
form.baseSalaryValue.value = "18000000"; // 18 juta

// Tambahan: Isi Unit Gaji (Jika Anda sudah mengimplementasikan saran saya)
// Jika Anda menggunakan script yang sudah saya revisi sebelumnya:
if (form.baseSalaryUnit) {
form.baseSalaryUnit.value = "MONTH";
}

// 6. Data Pelamaran
// Catatan: Properti ini akan menggunakan URL Pelamaran jika Anda sudah mengimplementasikan saran saya.
if (form.applicationUrl) {
form.applicationUrl.value = "https://globaltech.id/career/apply/senior-fullstack";
} else {
// Jika Anda masih menggunakan input lama:
form.applyMethod.value = "website";
form.applyInfo.value = "https://globaltech.id/career/apply";
}

// 7. Data Output (Default JSON-LD)
form.outputFormat.value = "json-ld";
}

// Panggil fungsi auto-fill saat script dimuat
autofillMockData();
-->