263 lines
14 KiB
PHP
263 lines
14 KiB
PHP
@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
|