Borang UL7 Digital – Sistem HPSF Muar

/* ==================================== */
/* 2. GAYA CSS (style.css) – VANILLA CSS */
/* ==================================== */
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
color: #333;
margin: 0;
padding: 20px;
}

.container {
max-width: 900px;
margin: 0 auto;
background: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

h1 {
color: #007bff;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
margin-bottom: 20px;
}

fieldset {
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px;
border-radius: 6px;
}

legend {
font-size: 1.2em;
font-weight: bold;
color: #333;
padding: 0 10px;
}

.form-group {
margin-bottom: 15px;
}

label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}

input[type=”text”], input[type=”date”], input[type=”file”] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}

/* Butang Hantar */
button[type=”submit”] {
background-color: #28a745;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
font-weight: bold;
transition: background-color 0.3s;
}

button[type=”submit”]:hover:not(:disabled) {
background-color: #218838;
}

button[type=”submit”]:disabled {
background-color: #90ee90;
cursor: not-allowed;
}

/* Butang Cetak */
#cetakBtn {
background-color: #007bff;
margin-top: 20px;
display: block;
color: white;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
font-weight: bold;
transition: background-color 0.3s;
}

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

.hidden {
display: none !important;
}

/* Gaya Timeline */
.timeline {
position: relative;
padding: 20px 0 20px 30px;
list-style: none;
}

.timeline::before {
content: ”;
position: absolute;
top: 0;
bottom: 0;
left: 10px;
width: 2px;
background-color: #ccc;
}

.timeline-item {
position: relative;
margin-bottom: 20px;
padding-left: 20px;
}

.timeline-dot {
position: absolute;
left: -19px; /* Jajarkan dengan garis */
top: 5px;
height: 12px;
width: 12px;
background-color: #fff;
border: 3px solid #ccc; /* Default untuk pending */
border-radius: 50%;
}

.timeline-item.completed .timeline-dot {
background-color: #28a745;
border-color: #28a745;
}

.timeline-item.action .timeline-dot {
background-color: #ffc107;
border-color: #ffc107;
}

.timeline-item.rejected .timeline-dot {
background-color: #dc3545;
border-color: #dc3545;
}

.timeline-content {
background: #f9f9f9;
padding: 10px;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.status-badge {
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
font-size: 0.8em;
font-weight: bold;
margin-top: 5px;
}

.badge-pending { background-color: #ccc; color: #333; }
.badge-completed { background-color: #28a745; color: white; }
.badge-rejected { background-color: #dc3545; color: white; }
.badge-action { background-color: #ffc107; color: #333; }

// ====================================
// 3. LOGIK JAVASCRIPT (script.js) – VANILLA JS
// ====================================
document.addEventListener(‘DOMContentLoaded’, () => {
const ul7Form = document.getElementById(‘ul7Form’);
const statusTimeline = document.getElementById(‘statusTimeline’);
const cetakBtn = document.getElementById(‘cetakBtn’);
const submitBtn = document.getElementById(‘submitBtn’);

// Data simulasi status pemprosesan (Initial State)
let timelineData = [
{ status: “Dihantar”, oleh: “Pemohon”, tarikh: “Belum”, badge: ‘pending’, catatan: “Menunggu penghantaran borang.” },
{ status: “Semakan Ketua Jabatan (KJ)”, oleh: “Ketua Jabatan”, tarikh: “Belum”, badge: ‘pending’, catatan: “Menunggu semakan dan sokongan oleh KJ.” },
{ status: “Semakan Kepatuhan”, oleh: “Urusetia Latihan”, tarikh: “Belum”, badge: ‘pending’, catatan: “Menunggu semakan kepatuhan dasar dan dokumen sokongan.” },
{ status: “Semakan Peruntukan”, oleh: “Akauntan/Kewangan”, tarikh: “Belum”, badge: ‘pending’, catatan: “Menunggu pengesahan ketersediaan peruntukan.” },
{ status: “Kelulusan Akhir”, oleh: “Urusetia Latihan”, tarikh: “Belum”, badge: ‘pending’, catatan: “Pengesahan akhir dan sedia untuk dicetak.” }
];

// Fungsi untuk memaparkan timeline
function renderTimeline() {
statusTimeline.innerHTML = ”;
timelineData.forEach((item, index) => {
const itemDiv = document.createElement(‘div’);
itemDiv.className = `timeline-item ${item.badge}`;

// Tambah ‘dot’
const dot = document.createElement(‘div’);
dot.className = ‘timeline-dot’;
itemDiv.appendChild(dot);

// Kandungan status
const contentDiv = document.createElement(‘div’);
contentDiv.className = ‘timeline-content’;

let statusLabel = item.badge === ‘completed’ ? ‘Selesai’ :
item.badge === ‘action’ ? ‘Sedang Diproses’ : ‘Menunggu’;

if (item.status === “Kelulusan Akhir” && item.badge === ‘completed’) {
statusLabel = ‘Diluluskan’;
}

contentDiv.innerHTML = `

${item.status}

Tindakan oleh: ${item.oleh}

Tarikh Tindakan: ${item.tarikh}

${statusLabel}

${item.catatan}

`;
itemDiv.appendChild(contentDiv);
statusTimeline.appendChild(itemDiv);
});
}

// Fungsi simulasi pemprosesan
function simulateProcessing() {
let currentStep = 0;

// Set langkah pertama (Dihantar) sebagai selesai
timelineData[0].tarikh = new Date().toLocaleDateString(‘ms-MY’);
timelineData[0].badge = ‘completed’;
timelineData[0].catatan = “Borang telah berjaya dihantar oleh Pemohon.”;
renderTimeline();

currentStep = 1;

const interval = setInterval(() => {
if (currentStep {
e.preventDefault();

// Disable semua input borang selepas hantar
document.querySelectorAll(‘#ul7Form input’).forEach(input => input.disabled = true);
submitBtn.disabled = true;
submitBtn.textContent = ‘Permohonan Sedang Diproses…’;

alert(“Borang UL7 Berjaya Dihantar! Proses kelulusan akan dipaparkan di bahagian Status Pemprosesan.”);

// Mulakan simulasi pemprosesan
simulateProcessing();
});

// Paparkan timeline awal (Status: Menunggu Penghantaran)
renderTimeline();
});