first commit
This commit is contained in:
34
resources/views/staff/success.blade.php
Normal file
34
resources/views/staff/success.blade.php
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ms">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Berjaya</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
<div class="container py-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-lg text-center">
|
||||
<div class="card-body p-5">
|
||||
<div class="mb-4">
|
||||
<i class="bi bi-check-circle-fill text-success" style="font-size: 5rem;"></i>
|
||||
</div>
|
||||
<h2 class="text-success mb-3">Terima Kasih!</h2>
|
||||
<p class="lead mb-4">{{ session('success', 'Jawapan anda telah direkodkan.') }}</p>
|
||||
<p class="text-muted">Maklum balas anda sangat berharga untuk penambahbaikan program pada masa hadapan.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4 text-muted">
|
||||
<small>© {{ date('Y') }} myEventPostMortem</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
262
resources/views/staff/surveys/soalan.blade.php
Normal file
262
resources/views/staff/surveys/soalan.blade.php
Normal file
@@ -0,0 +1,262 @@
|
||||
@extends('layouts.staff')
|
||||
|
||||
@section('content')
|
||||
<div class="container">
|
||||
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-dark text-white text-center">
|
||||
<h4 class="mb-1">{{ $survey->title }}</h4>
|
||||
<small class="text-white-50">Tarikh: {{ \Carbon\Carbon::parse($survey->date)->format('d M Y') }}</small>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
|
||||
@if($survey->perincian)
|
||||
<div class="mb-4 text-dark">
|
||||
{!! nl2br(e($survey->perincian)) !!}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($errors->any())
|
||||
<div class="alert alert-danger">
|
||||
<strong>Ralat!</strong> {{ $errors->first() }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('surveys.store', $survey->uuid) }}" method="POST" id="survey-form">
|
||||
@csrf
|
||||
<div class="card shadow-sm mb-4 border-primary">
|
||||
<div class="card-header bg-primary text-white small fw-bold">MAKLUMAT RESPONDEN</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-bold">Nama Penuh</label>
|
||||
<input type="text" name="respondent_name" class="form-control" placeholder="Nama Penuh Anda" required>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label small fw-bold">No. Pekerja</label>
|
||||
<input type="text" name="respondent_no_pekerja" class="form-control" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label small fw-bold">Jabatan</label>
|
||||
<select name="respondent_jabatan" class="form-select" required>
|
||||
<option value="">Pilih Jabatan</option>
|
||||
<option value="DatukBandar">Datuk Bandar</option>
|
||||
<option value="SU">Setiausaha</option>
|
||||
<option value="TSU">Timbalan Setiausaha</option>
|
||||
<option value="JKP">Khidmat Pengurusan</option>
|
||||
<option value="Kewangan">Kewangan</option>
|
||||
<option value="JPPH">Penilaian dan Pengurusan Harta</option>
|
||||
<option value="JPP">Perancangan Pembangunan</option>
|
||||
<option value="Kejuruteraan">Kejuruteraan</option>
|
||||
<option value="Bangunan">Bangunan</option>
|
||||
<option value="JKA">Kesihatan Awam</option>
|
||||
<option value="Pelesenan">Pelesenan</option>
|
||||
<option value="Penguatkuasaan">Penguatkuasaan</option>
|
||||
<option value="JPM">Pembangunan Masyarakat</option>
|
||||
<option value="Lanskap">Lanskap</option>
|
||||
<option value="Undang-undang">Undang-undang</option>
|
||||
<option value="Korporat">Korporat dan Perhubungan Awam</option>
|
||||
<option value="JTM">Teknologi Maklumat</option>
|
||||
<option value="Audit">Unit Audi Dalam</option>
|
||||
<option value="PengurusanStrategik">Unit Pengurusan Strategik</option>
|
||||
<option value="Integriti">Unit Integriti</option>
|
||||
<option value="OSC">Unit Pusat Sehenti (OSC)</option>
|
||||
<option value="COB">Unit Pesuruhjaya Bangunan (COB)</option>
|
||||
<option value="UBP">Unit Bandar Pintar (Smart City)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{-- LOOP BAHAGIAN --}}
|
||||
@foreach($survey->sections as $section)
|
||||
<fieldset class="mb-5">
|
||||
<legend class="border-bottom pb-2 mb-3 fw-bold text-primary">{{ $section->title }}</legend>
|
||||
@if($section->description)
|
||||
<p class="text-muted mb-4">{{ $section->description }}</p>
|
||||
@endif
|
||||
|
||||
{{-- LOOP SOALAN --}}
|
||||
@foreach($section->questions as $question)
|
||||
<div class="card mb-4 border-0 shadow-sm bg-light">
|
||||
<div class="card-body">
|
||||
<label class="form-label fw-bold mb-3">
|
||||
{{ $loop->iteration }}. {{ $question->question_text }}
|
||||
@if($question->type != 'checkbox' && $question->type != 'text')
|
||||
<span class="text-danger">*</span>
|
||||
@endif
|
||||
</label>
|
||||
|
||||
{{-- TYPE: RADIO --}}
|
||||
@if($question->type == 'radio')
|
||||
<div class="radio-group" data-id="{{ $question->id }}">
|
||||
@foreach($question->options as $option)
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input normal-option" type="radio"
|
||||
name="answers[{{ $question->id }}]"
|
||||
id="q{{ $question->id }}_opt{{ $option->id }}"
|
||||
value="{{ $option->option_text }}" required>
|
||||
<label class="form-check-label" for="q{{ $question->id }}_opt{{ $option->id }}">
|
||||
{{ $option->option_text }}
|
||||
</label>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
{{-- OTHERS OPTION FOR RADIO --}}
|
||||
@if($question->allow_other_option)
|
||||
<div class="form-check mt-2">
|
||||
<input class="form-check-input other-radio" type="radio"
|
||||
name="answers[{{ $question->id }}]"
|
||||
id="q{{ $question->id }}_other"
|
||||
value="Other">
|
||||
<label class="form-check-label fw-bold" for="q{{ $question->id }}_other">
|
||||
Lain-lain (Sila nyatakan):
|
||||
</label>
|
||||
<input type="text" class="form-control mt-1 other-text-input"
|
||||
style="display:none;"
|
||||
placeholder="Sila tulis jawapan anda..." disabled>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- TYPE: CHECKBOX --}}
|
||||
@elseif($question->type == 'checkbox')
|
||||
<div class="checkbox-group" data-id="{{ $question->id }}">
|
||||
@foreach($question->options as $option)
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input normal-option" type="checkbox"
|
||||
name="answers[{{ $question->id }}][]"
|
||||
id="q{{ $question->id }}_opt{{ $option->id }}"
|
||||
value="{{ $option->option_text }}">
|
||||
<label class="form-check-label" for="q{{ $question->id }}_opt{{ $option->id }}">
|
||||
{{ $option->option_text }}
|
||||
</label>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
{{-- OTHERS OPTION FOR CHECKBOX --}}
|
||||
@if($question->allow_other_option)
|
||||
<div class="form-check mt-2">
|
||||
<input class="form-check-input other-checkbox" type="checkbox"
|
||||
name="answers[{{ $question->id }}][]"
|
||||
id="q{{ $question->id }}_other_check"
|
||||
value="Other">
|
||||
<label class="form-check-label fw-bold" for="q{{ $question->id }}_other_check">
|
||||
Lain-lain (Sila nyatakan):
|
||||
</label>
|
||||
<input type="text" class="form-control mt-1 other-text-input"
|
||||
style="display:none;"
|
||||
placeholder="Sila tulis jawapan anda..." disabled>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- TYPE: TEXT --}}
|
||||
@elseif($question->type == 'text')
|
||||
<textarea name="answers[{{ $question->id }}]"
|
||||
class="form-control"
|
||||
rows="3"
|
||||
placeholder="Tulis jawapan anda di sini..." required></textarea>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</fieldset>
|
||||
@endforeach
|
||||
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4 mb-5">
|
||||
<button type="submit" class="btn btn-primary btn-lg">Hantar Jawapan</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// 1. Handle RADIO logic
|
||||
const radioGroups = document.querySelectorAll('.radio-group');
|
||||
radioGroups.forEach(group => {
|
||||
const otherRadio = group.querySelector('.other-radio');
|
||||
const otherInput = group.querySelector('.other-text-input');
|
||||
const normalRadios = group.querySelectorAll('.normal-option');
|
||||
|
||||
if(otherRadio && otherInput) {
|
||||
otherRadio.addEventListener('change', function() {
|
||||
if(this.checked) {
|
||||
otherInput.style.display = 'block';
|
||||
otherInput.disabled = false;
|
||||
otherInput.focus();
|
||||
otherInput.required = true; // Paksa isi
|
||||
}
|
||||
});
|
||||
|
||||
normalRadios.forEach(radio => {
|
||||
radio.addEventListener('change', function() {
|
||||
if(this.checked) {
|
||||
otherInput.style.display = 'none';
|
||||
otherInput.disabled = true;
|
||||
otherInput.value = '';
|
||||
otherInput.required = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 2. Handle CHECKBOX logic
|
||||
const checkboxGroups = document.querySelectorAll('.checkbox-group');
|
||||
checkboxGroups.forEach(group => {
|
||||
const otherCheck = group.querySelector('.other-checkbox');
|
||||
const otherInput = group.querySelector('.other-text-input');
|
||||
|
||||
if(otherCheck && otherInput) {
|
||||
otherCheck.addEventListener('change', function() {
|
||||
if(this.checked) {
|
||||
otherInput.style.display = 'block';
|
||||
otherInput.disabled = false;
|
||||
otherInput.focus();
|
||||
otherInput.required = true;
|
||||
} else {
|
||||
otherInput.style.display = 'none';
|
||||
otherInput.disabled = true;
|
||||
otherInput.value = '';
|
||||
otherInput.required = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 3. FORM SUBMISSION INTERCEPTOR
|
||||
// Ini trick paling penting. Sebelum hantar ke server, kita tukar value radio/checkbox
|
||||
// "Other" tu menjadi text yang user tulis.
|
||||
const form = document.getElementById('survey-form');
|
||||
form.addEventListener('submit', function(e) {
|
||||
|
||||
// Cari semua input text "Lain-lain" yang aktif (tidak disabled)
|
||||
const activeOtherInputs = document.querySelectorAll('.other-text-input:not(:disabled)');
|
||||
|
||||
activeOtherInputs.forEach(input => {
|
||||
// Cari radio/checkbox kawannya (previous element sibling dalam DOM structure wrapper)
|
||||
// Dalam struktur HTML di atas, input text adalah adik beradik dengan label, dan label dengan input radio.
|
||||
|
||||
// Kita cari wrapper parent div
|
||||
const wrapper = input.closest('.form-check');
|
||||
const relatedOption = wrapper.querySelector('input[type="radio"], input[type="checkbox"]');
|
||||
|
||||
if(relatedOption && relatedOption.checked) {
|
||||
// TUKAR VALUE radio/checkbox menjadi apa yang user tulis
|
||||
// Contoh: dari value="Other" jadi value="Saya suka makan nasi ayam"
|
||||
relatedOption.value = "Lain-lain: " + input.value;
|
||||
}
|
||||
});
|
||||
|
||||
// Benarkan form submit seperti biasa
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user