first

- Tambah fields[name][ic_font_size] dalam form — baris: Warna | Saiz Font No IC | Align
- Default: 70% daripada saiz font nama (sebelum ini hardcode 50%)
- loadPreview() hantar ic_font_size terkini ke endpoint pratonton
- writeIcBelow() baca ic_font_size dari config, fallback 70% jika tiada
- Validasi updateConfig: ic_font_size nullable|integer|min:8|max:200

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.dockerignore

@@ -29,9 +29,9 @@ public/build
 .phpunit.cache
 phpunit.xml
 
-# Docker files (tidak perlu dalam app container)
+# Docker Compose files (tidak perlu dalam app container)
 docker-compose*.yml
-docker/
+# docker/ TIDAK diexclude — Dockerfile perlukan docker/entrypoint.sh dan docker/php/php.ini
 
 # Logs & cache
 storage/logs/*

.env.docker

@@ -28,7 +28,9 @@ LOG_LEVEL=debug
 
 # ── Database ──────────────────────────────────────────────────────────────────
 DB_CONNECTION=mysql
-DB_HOST=db                # nama service dalam docker-compose.yml
+# DEV (Windows):  DB_HOST=host.docker.internal  ← MySQL pada host Windows
+# PRODUCTION:     DB_HOST=172.17.200.16          ← MySQL server external
+DB_HOST=host.docker.internal
 DB_PORT=3306
 DB_DATABASE=ecert_mbip
 DB_USERNAME=ecert

app/Http/Controllers/Admin/CertificateTemplateController.php

@@ -55,6 +55,7 @@ class CertificateTemplateController extends Controller
             'fields.*.x'              => 'required|integer|min:0',
             'fields.*.y'              => 'required|integer|min:0',
             'fields.*.font_size'      => 'required|integer|min:8|max:200',
+            'fields.*.ic_font_size'   => 'nullable|integer|min:8|max:200',
             'fields.*.font_color'     => 'required|string|max:20',
             'fields.*.align'          => 'required|in:left,center,right',
         ]);
@@ -102,8 +103,19 @@ class CertificateTemplateController extends Controller
         $sampleName = $request->input('sample_name', 'NAMA PESERTA CONTOH');
         $sampleNo   = $request->input('sample_no', 'ECT/2025/0001');
 
+        // Bina override dari nilai form semasa (belum disimpan)
+        // Gabung dengan config tersimpan supaya font_file & valign kekal
+        $liveFields = null;
+        if ($request->has('fields') && is_array($request->input('fields'))) {
+            $saved      = $template->config_json['fields'] ?? [];
+            $liveFields = [];
+            foreach ($request->input('fields') as $key => $cfg) {
+                $liveFields[$key] = array_merge($saved[$key] ?? [], array_filter($cfg, fn($v) => $v !== null && $v !== ''));
+            }
+        }
+
         try {
-            $imageData = $service->generatePreview($template, $sampleName, $sampleNo);
+            $imageData = $service->generatePreview($template, $sampleName, $sampleNo, $liveFields);
         } catch (\Throwable $e) {
             return response()->json(['error' => $e->getMessage()], 500);
         }

app/Http/Controllers/Admin/ParticipantController.php

@@ -40,11 +40,16 @@ class ParticipantController extends Controller
 
         $programParticipants = $query->paginate(20)->withQueryString();
 
+        $countRow = DB::table('program_participants')
+            ->where('program_id', $program->id)
+            ->selectRaw("COUNT(*) as total, SUM(is_pre_registered) as pre_registered, SUM(registration_source = 'walk_in') as walk_in, SUM(status = 'checked_in') as checked_in")
+            ->first();
+
         $counts = [
-            'total'          => $program->programParticipants()->count(),
+            'total'          => (int) ($countRow->total          ?? 0),
-            'pre_registered' => $program->programParticipants()->where('is_pre_registered', true)->count(),
+            'pre_registered' => (int) ($countRow->pre_registered ?? 0),
-            'walk_in'        => $program->programParticipants()->where('registration_source', 'walk_in')->count(),
+            'walk_in'        => (int) ($countRow->walk_in        ?? 0),
-            'checked_in'     => $program->programParticipants()->where('status', 'checked_in')->count(),
+            'checked_in'     => (int) ($countRow->checked_in     ?? 0),
         ];
 
         return view('admin.programs.participants.index', compact('program', 'programParticipants', 'counts'));

app/Http/Controllers/Admin/ProfileController.php

@@ -0,0 +1,60 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Validation\Rules\Password;
+use Illuminate\View\View;
+
+class ProfileController extends Controller
+{
+    public function show(): View
+    {
+        return view('admin.profile.show', ['user' => auth()->user()]);
+    }
+
+    public function updateEmail(Request $request): RedirectResponse
+    {
+        $validator = \Validator::make($request->all(), [
+            'current_password' => ['required', 'current_password'],
+            'email'            => ['required', 'email', 'max:255', 'unique:users,email,' . auth()->id()],
+        ], [
+            'current_password.current_password' => 'Kata laluan semasa tidak betul.',
+            'email.unique'                       => 'Alamat emel ini sudah digunakan.',
+        ]);
+
+        if ($validator->fails()) {
+            return back()->withErrors($validator, 'email')->withInput();
+        }
+
+        auth()->user()->update(['email' => $request->email]);
+
+        return back()->with('email_success', 'Alamat emel berjaya dikemaskini.');
+    }
+
+    public function updatePassword(Request $request): RedirectResponse
+    {
+        $validator = \Validator::make($request->all(), [
+            'current_password' => ['required', 'current_password'],
+            'password'         => ['required', 'confirmed', Password::min(8)],
+        ], [
+            'current_password.current_password' => 'Kata laluan semasa tidak betul.',
+            'password.min'                       => 'Kata laluan baru mestilah sekurang-kurangnya 8 aksara.',
+            'password.confirmed'                 => 'Pengesahan kata laluan tidak sepadan.',
+        ]);
+
+        if ($validator->fails()) {
+            return back()->withErrors($validator, 'password')->withInput();
+        }
+
+        auth()->user()->update(['password' => Hash::make($request->password)]);
+
+        Auth::login(auth()->user());
+
+        return back()->with('password_success', 'Kata laluan berjaya ditukar.');
+    }
+}

app/Http/Controllers/Admin/ProgramController.php

@@ -70,13 +70,24 @@ class ProgramController extends Controller
             'questionnaire.questionnaireSet.questions',
         ]);
 
+        // Consolidate into 2 queries instead of 6 separate COUNTs
+        $ppStats = \DB::table('program_participants')
+            ->where('program_id', $program->id)
+            ->selectRaw("COUNT(*) as total, SUM(is_pre_registered) as pre_registered, SUM(registration_source = 'walk_in') as walk_in")
+            ->first();
+
+        $certStats = \DB::table('certificates')
+            ->where('program_id', $program->id)
+            ->selectRaw("COUNT(*) as total, SUM(status IN ('generated','emailed','downloaded')) as cert_generated")
+            ->first();
+
         $stats = [
-            'total_participants'    => $program->programParticipants()->count(),
+            'total_participants'     => (int) ($ppStats->total          ?? 0),
-            'pre_registered'        => $program->programParticipants()->where('is_pre_registered', true)->count(),
+            'pre_registered'         => (int) ($ppStats->pre_registered ?? 0),
-            'walk_in'               => $program->programParticipants()->where('registration_source', 'walk_in')->count(),
+            'walk_in'                => (int) ($ppStats->walk_in        ?? 0),
-            'total_attendances'     => $program->attendances()->count(),
+            'total_attendances'      => $program->attendances()->count(),
-            'total_certificates'    => $program->certificates()->count(),
+            'total_certificates'     => (int) ($certStats->total        ?? 0),
-            'generated_certificates'=> $program->certificates()->whereIn('status', ['generated', 'emailed', 'downloaded'])->count(),
+            'generated_certificates' => (int) ($certStats->cert_generated ?? 0),
         ];
 
         return view('admin.programs.show', compact('program', 'stats'));

app/Http/Controllers/Admin/ProgramQuestionnaireController.php

@@ -69,6 +69,23 @@ class ProgramQuestionnaireController extends Controller
         return back()->with('success', 'Soalselidik telah disahkan untuk program ini.');
     }
 
+    public function preview(Program $program): View|\Illuminate\Http\RedirectResponse
+    {
+        $pq = $program->questionnaire()->with('questionnaireSet')->first();
+
+        if (! $pq || ! $pq->questionnaireSet) {
+            return back()->with('error', 'Tiada soalselidik untuk dipratonton.');
+        }
+
+        $questions = $pq->questionnaireSet->questions()
+            ->whereNull('parent_id')
+            ->with(['children' => fn($q) => $q->orderBy('sort_order')])
+            ->orderBy('sort_order')
+            ->get();
+
+        return view('admin.programs.questionnaire.preview', compact('program', 'pq', 'questions'));
+    }
+
     public function detach(Program $program): RedirectResponse
     {
         $pq = $program->questionnaire;

app/Http/Controllers/Admin/QuestionController.php

@@ -13,26 +13,58 @@ class QuestionController extends Controller
 {
     public function store(Request $request, QuestionnaireSet $set): RedirectResponse
     {
+        if ($request->has('options')) {
+            $request->merge(['options' => array_values(array_filter($request->input('options', [])))]);
+        }
+
         $data = $request->validate([
-            'question_text' => 'required|string|max:1000',
+            'question_text'   => 'required|string|max:1000',
-            'question_type' => 'required|in:rating,single_choice,multiple_choice,short_text,long_text',
+            'question_type'   => 'required|in:tajuk,rating,single_choice,multiple_choice,short_text,long_text',
-            'is_required'   => 'boolean',
+            'is_required'     => 'boolean',
-            'options'       => 'nullable|array',
+            'parent_id'       => 'nullable|integer|exists:questionnaire_questions,id',
-            'options.*'     => 'required|string|max:255',
+            'options'         => 'nullable|array',
+            'options.*'       => 'required|string|max:255',
+            'rating_labels'   => 'nullable|array',
+            'rating_labels.*' => 'nullable|string|max:100',
         ]);
 
+        if ($data['question_type'] === 'rating') {
+            if (empty($data['parent_id'])) {
+                return back()->withErrors(['parent_id' => 'Soalan rating mesti diletakkan di bawah tajuk.'])->withInput();
+            }
+            $parent = QuestionnaireQuestion::find($data['parent_id']);
+            if (! $parent || $parent->question_type !== 'tajuk') {
+                return back()->withErrors(['parent_id' => 'Parent mesti jenis Tajuk.'])->withInput();
+            }
+        }
+
         $needsOptions = in_array($data['question_type'], ['single_choice', 'multiple_choice']);
         if ($needsOptions && empty($data['options'])) {
             return back()->withErrors(['options' => 'Pilihan jawapan diperlukan untuk jenis soalan ini.'])->withInput();
         }
 
-        $maxOrder = $set->questions()->max('sort_order') ?? 0;
+        $parentId = $data['question_type'] === 'rating' ? ($data['parent_id'] ?? null) : null;
+
+        $maxOrder = $set->questions()
+            ->when($parentId,
+                fn($q) => $q->where('parent_id', $parentId),
+                fn($q) => $q->whereNull('parent_id')
+            )
+            ->max('sort_order') ?? 0;
+
+        $ratingLabels = null;
+        if ($data['question_type'] === 'tajuk') {
+            $filtered = array_filter($data['rating_labels'] ?? [], fn($v) => $v !== null && $v !== '');
+            $ratingLabels = ! empty($filtered) ? $filtered : null;
+        }
 
         $set->questions()->create([
             'question_text' => $data['question_text'],
             'question_type' => $data['question_type'],
-            'is_required'   => $data['is_required'] ?? true,
+            'parent_id'     => $parentId,
+            'is_required'   => $data['question_type'] === 'tajuk' ? false : ($data['is_required'] ?? true),
             'options_json'  => $needsOptions ? array_values(array_filter($data['options'] ?? [])) : null,
+            'rating_labels' => $ratingLabels,
             'sort_order'    => $maxOrder + 1,
         ]);
 
@@ -42,21 +74,48 @@ class QuestionController extends Controller
 
     public function update(Request $request, QuestionnaireQuestion $question): RedirectResponse
     {
+        if ($request->has('options')) {
+            $request->merge(['options' => array_values(array_filter($request->input('options', [])))]);
+        }
+
         $data = $request->validate([
-            'question_text' => 'required|string|max:1000',
+            'question_text'   => 'required|string|max:1000',
-            'question_type' => 'required|in:rating,single_choice,multiple_choice,short_text,long_text',
+            'question_type'   => 'required|in:tajuk,rating,single_choice,multiple_choice,short_text,long_text',
-            'is_required'   => 'boolean',
+            'is_required'     => 'boolean',
-            'options'       => 'nullable|array',
+            'parent_id'       => 'nullable|integer|exists:questionnaire_questions,id',
-            'options.*'     => 'required|string|max:255',
+            'options'         => 'nullable|array',
+            'options.*'       => 'required|string|max:255',
+            'rating_labels'   => 'nullable|array',
+            'rating_labels.*' => 'nullable|string|max:100',
         ]);
 
+        if ($data['question_type'] === 'rating') {
+            if (empty($data['parent_id'])) {
+                return back()->withErrors(['parent_id' => 'Soalan rating mesti diletakkan di bawah tajuk.'])->withInput();
+            }
+            $parent = QuestionnaireQuestion::find($data['parent_id']);
+            if (! $parent || $parent->question_type !== 'tajuk') {
+                return back()->withErrors(['parent_id' => 'Parent mesti jenis Tajuk.'])->withInput();
+            }
+        }
+
         $needsOptions = in_array($data['question_type'], ['single_choice', 'multiple_choice']);
 
+        $parentId = $data['question_type'] === 'rating' ? ($data['parent_id'] ?? null) : null;
+
+        $ratingLabels = null;
+        if ($data['question_type'] === 'tajuk') {
+            $filtered = array_filter($data['rating_labels'] ?? [], fn($v) => $v !== null && $v !== '');
+            $ratingLabels = ! empty($filtered) ? $filtered : null;
+        }
+
         $question->update([
             'question_text' => $data['question_text'],
             'question_type' => $data['question_type'],
-            'is_required'   => $data['is_required'] ?? true,
+            'parent_id'     => $parentId,
+            'is_required'   => $data['question_type'] === 'tajuk' ? false : ($data['is_required'] ?? true),
             'options_json'  => $needsOptions ? array_values(array_filter($data['options'] ?? [])) : null,
+            'rating_labels' => $ratingLabels,
         ]);
 
         return redirect()->route('admin.questionnaires.show', $question->questionnaire_set_id)
@@ -66,6 +125,12 @@ class QuestionController extends Controller
     public function destroy(QuestionnaireQuestion $question): RedirectResponse
     {
         $setId = $question->questionnaire_set_id;
+
+        // Cascade-delete children if this is a tajuk (DB cascade handles it too, but be explicit)
+        if ($question->question_type === 'tajuk') {
+            $question->children()->delete();
+        }
+
         $question->delete();
 
         return redirect()->route('admin.questionnaires.show', $setId)
@@ -75,8 +140,9 @@ class QuestionController extends Controller
     public function reorder(Request $request): JsonResponse
     {
         $data = $request->validate([
-            'order'   => 'required|array',
+            'order'     => 'required|array',
-            'order.*' => 'integer|exists:questionnaire_questions,id',
+            'order.*'   => 'integer|exists:questionnaire_questions,id',
+            'parent_id' => 'nullable|integer|exists:questionnaire_questions,id',
         ]);
 
         foreach ($data['order'] as $sortOrder => $questionId) {

app/Http/Controllers/Admin/QuestionnaireSetController.php

@@ -52,10 +52,18 @@ class QuestionnaireSetController extends Controller
 
     public function show(QuestionnaireSet $set): View
     {
-        $set->load(['questions', 'creator']);
+        $set->load('creator');
+
+        $topLevel = $set->questions()
+            ->whereNull('parent_id')
+            ->with(['children' => fn($q) => $q->orderBy('sort_order')])
+            ->orderBy('sort_order')
+            ->get();
+
+        $totalCount  = $set->questions()->count();
         $usedInPrograms = $set->programs()->get();
 
-        return view('admin.questionnaires.show', compact('set', 'usedInPrograms'));
+        return view('admin.questionnaires.show', compact('set', 'topLevel', 'totalCount', 'usedInPrograms'));
     }
 
     public function edit(QuestionnaireSet $set): View

app/Http/Controllers/Admin/StatisticsController.php

@@ -17,7 +17,7 @@ class StatisticsController extends Controller
 {
     public function show(Program $program): View
     {
-        $program->load(['attendances.participant', 'questionnaire.questionnaireSet.questions']);
+        $program->load(['questionnaire.questionnaireSet.questions']);
 
         // Attendance by session
         $bySession = $program->attendances()
@@ -40,23 +40,29 @@ class StatisticsController extends Controller
             ->pluck('total', 'status')
             ->toArray();
 
-        // Response rate
+        // Response rate + question stats
         $pq = $program->questionnaire;
         $responseRate = null;
         $questionStats = [];
+        $totalResponses = 0;
 
         if ($pq && $pq->is_confirmed) {
-            $totalAttended = $program->attendances()->count();
+            $totalAttended = array_sum($bySession);  // reuse already-fetched data
             $totalResponses = QuestionnaireResponse::where('program_id', $program->id)->count();
             $responseRate = $totalAttended > 0 ? round($totalResponses / $totalAttended * 100) : 0;
 
-            // Rating question averages
             $questions = $pq->questionnaireSet->questions ?? collect();
+
+            // Load ALL answers in one query, group by question — avoids N+1
+            $allAnswers = QuestionnaireAnswer::whereIn('questionnaire_question_id', $questions->pluck('id'))
+                ->get()
+                ->groupBy('questionnaire_question_id');
+
             foreach ($questions as $q) {
+                $answers = $allAnswers->get($q->id, collect());
+
                 if ($q->question_type === 'rating') {
-                    $answers = QuestionnaireAnswer::where('questionnaire_question_id', $q->id)
+                    $values = $answers->map(fn($a) => is_array($a->answer_value) ? (int) ($a->answer_value[0] ?? 0) : (int) $a->answer_value);
-                        ->pluck('answer_value');
-                    $values = $answers->map(fn($v) => is_array($v) ? (int)($v[0] ?? 0) : (int)$v);
                     $questionStats[] = [
                         'id'      => $q->id,
                         'text'    => $q->question_text,
@@ -65,11 +71,9 @@ class StatisticsController extends Controller
                         'count'   => $values->count(),
                     ];
                 } elseif (in_array($q->question_type, ['single_choice', 'multiple_choice'])) {
-                    $answers = QuestionnaireAnswer::where('questionnaire_question_id', $q->id)
-                        ->pluck('answer_value');
                     $counts = [];
-                    foreach ($answers as $val) {
+                    foreach ($answers as $row) {
-                        $items = is_array($val) ? $val : [$val];
+                        $items = is_array($row->answer_value) ? $row->answer_value : [$row->answer_value];
                         foreach ($items as $item) {
                             $counts[$item] = ($counts[$item] ?? 0) + 1;
                         }
@@ -86,14 +90,15 @@ class StatisticsController extends Controller
             }
         }
 
+        // Reuse data already computed above — no extra queries
         $summary = [
-            'total_attendances'    => $program->attendances()->count(),
+            'total_attendances'  => array_sum($bySession),
-            'pre_registered'       => $program->attendances()->where('attendance_source', 'pre_registered_staff')->count(),
+            'pre_registered'     => $bySource['pre_registered_staff'] ?? 0,
-            'walk_in'              => $program->attendances()->where('attendance_source', 'walk_in_external')->count(),
+            'walk_in'            => $bySource['walk_in_external']     ?? 0,
-            'total_certificates'   => $program->certificates()->count(),
+            'total_certificates' => array_sum($certStats),
-            'generated_certs'      => $program->certificates()->whereIn('status', ['generated', 'emailed', 'downloaded'])->count(),
+            'generated_certs'    => ($certStats['generated'] ?? 0) + ($certStats['emailed'] ?? 0) + ($certStats['downloaded'] ?? 0),
-            'downloaded_certs'     => $program->certificates()->where('status', 'downloaded')->count(),
+            'downloaded_certs'   => $certStats['downloaded'] ?? 0,
-            'total_responses'      => QuestionnaireResponse::where('program_id', $program->id)->count(),
+            'total_responses'    => $totalResponses,
         ];
 
         return view('admin.programs.statistics.show', compact(

app/Http/Controllers/Public/QuestionnaireController.php

@@ -9,6 +9,7 @@ use App\Models\QuestionnaireResponse;
 use App\Models\QuestionnaireAnswer;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
+use Illuminate\Support\Collection;
 use Illuminate\View\View;
 
 class QuestionnaireController extends Controller
@@ -20,27 +21,20 @@ class QuestionnaireController extends Controller
 
         $participant = Participant::where('uuid', $participant_uuid)->firstOrFail();
 
-        // Verify participant belongs to this program
         $pp = $program->programParticipants()->where('participant_id', $participant->id)->first();
         abort_if(! $pp, 404);
 
-        $pq = $program->questionnaire()->with('questionnaireSet.questions')->first();
+        $pq = $program->questionnaire()->with('questionnaireSet')->first();
 
         if (! $pq || ! $pq->is_confirmed) {
-            // No questionnaire — go straight to semak page
             return redirect()->route('public.semak.show', $qr_token);
         }
 
-        // Check already submitted
+        if (QuestionnaireResponse::where('program_id', $program->id)->where('participant_id', $participant->id)->exists()) {
-        $alreadySubmitted = QuestionnaireResponse::where('program_id', $program->id)
-            ->where('participant_id', $participant->id)
-            ->exists();
-
-        if ($alreadySubmitted) {
             return view('public.questionnaire.already', compact('program', 'participant', 'qrCode'));
         }
 
-        $questions = $pq->questionnaireSet->questions;
+        $questions = $this->loadHierarchical($pq);
 
         return view('public.questionnaire.show', compact('program', 'participant', 'qrCode', 'pq', 'questions'));
     }
@@ -55,38 +49,27 @@ class QuestionnaireController extends Controller
         $pp = $program->programParticipants()->where('participant_id', $participant->id)->first();
         abort_if(! $pp, 404);
 
-        $pq = $program->questionnaire()->with('questionnaireSet.questions')->first();
+        $pq = $program->questionnaire()->with('questionnaireSet')->first();
         abort_if(! $pq || ! $pq->is_confirmed, 404);
 
-        // Prevent double-submit
+        if (QuestionnaireResponse::where('program_id', $program->id)->where('participant_id', $participant->id)->exists()) {
-        $existing = QuestionnaireResponse::where('program_id', $program->id)
-            ->where('participant_id', $participant->id)
-            ->first();
-
-        if ($existing) {
             return view('public.questionnaire.already', compact('program', 'participant', 'qrCode'));
         }
 
-        $questions = $pq->questionnaireSet->questions;
+        $questions  = $this->loadHierarchical($pq);
+        $answerable = $this->flatten($questions);
 
-        // Validate required questions
         $rules = [];
-        foreach ($questions as $q) {
+        foreach ($answerable as $q) {
-            if ($q->is_required) {
-                $rules['q_' . $q->id] = 'required';
-            } else {
-                $rules['q_' . $q->id] = 'nullable';
-            }
             if ($q->question_type === 'multiple_choice') {
                 $rules['q_' . $q->id] = ($q->is_required ? 'required|' : 'nullable|') . 'array';
+            } else {
+                $rules['q_' . $q->id] = $q->is_required ? 'required' : 'nullable';
             }
         }
 
-        $validated = $request->validate($rules, [
+        $request->validate($rules, ['q_*.required' => 'Soalan ini wajib dijawab.']);
-            'q_*.required' => 'Soalan ini wajib dijawab.',
-        ]);
 
-        // Save response
         $response = QuestionnaireResponse::create([
             'program_id'           => $program->id,
             'participant_id'       => $participant->id,
@@ -96,7 +79,7 @@ class QuestionnaireController extends Controller
             'user_agent'           => substr($request->userAgent() ?? '', 0, 500),
         ]);
 
-        foreach ($questions as $q) {
+        foreach ($answerable as $q) {
             $raw = $request->input('q_' . $q->id);
 
             if ($raw === null && ! $q->is_required) {
@@ -110,12 +93,39 @@ class QuestionnaireController extends Controller
             };
 
             QuestionnaireAnswer::create([
-                'questionnaire_response_id'  => $response->id,
+                'questionnaire_response_id' => $response->id,
-                'questionnaire_question_id'  => $q->id,
+                'questionnaire_question_id' => $q->id,
-                'answer_value'               => $value,
+                'answer_value'              => $value,
             ]);
         }
 
         return view('public.questionnaire.thankyou', compact('program', 'participant', 'qrCode'));
     }
+
+    // ── Helpers ──────────────────────────────────────────────────────────────
+
+    private function loadHierarchical($pq): Collection
+    {
+        return $pq->questionnaireSet->questions()
+            ->whereNull('parent_id')
+            ->with(['children' => fn($q) => $q->orderBy('sort_order')])
+            ->orderBy('sort_order')
+            ->get();
+    }
+
+    /** Return only answerable (non-tajuk) questions as a flat collection. */
+    private function flatten(Collection $topLevel): Collection
+    {
+        $out = collect();
+        foreach ($topLevel as $q) {
+            if ($q->question_type === 'tajuk') {
+                foreach ($q->children as $child) {
+                    $out->push($child);
+                }
+            } else {
+                $out->push($q);
+            }
+        }
+        return $out;
+    }
 }

app/Models/QuestionnaireQuestion.php

@@ -7,16 +7,17 @@ use Illuminate\Database\Eloquent\Model;
 class QuestionnaireQuestion extends Model
 {
     protected $fillable = [
-        'questionnaire_set_id', 'question_text', 'question_type',
+        'questionnaire_set_id', 'parent_id', 'question_text', 'question_type',
-        'options_json', 'is_required', 'sort_order',
+        'options_json', 'rating_labels', 'is_required', 'sort_order',
     ];
 
     protected function casts(): array
     {
         return [
-            'options_json' => 'array',
+            'options_json'  => 'array',
-            'is_required'  => 'boolean',
+            'rating_labels' => 'array',
-            'sort_order'   => 'integer',
+            'is_required'   => 'boolean',
+            'sort_order'    => 'integer',
         ];
     }
 
@@ -25,6 +26,16 @@ class QuestionnaireQuestion extends Model
         return $this->belongsTo(QuestionnaireSet::class);
     }
 
+    public function parent()
+    {
+        return $this->belongsTo(QuestionnaireQuestion::class, 'parent_id');
+    }
+
+    public function children()
+    {
+        return $this->hasMany(QuestionnaireQuestion::class, 'parent_id')->orderBy('sort_order');
+    }
+
     public function answers()
     {
         return $this->hasMany(QuestionnaireAnswer::class);

app/Services/CertificateService.php

@@ -9,6 +9,7 @@ use App\Models\CertificateTemplate;
 use Illuminate\Support\Facades\Storage;
 use Intervention\Image\ImageManager;
 use Intervention\Image\Drivers\Gd\Driver;
+use Intervention\Image\Encoders\JpegEncoder;
 use Intervention\Image\Typography\FontFactory;
 
 class CertificateService
@@ -32,21 +33,20 @@ class CertificateService
                 throw new \RuntimeException('Template sijil tidak dijumpai.');
             }
 
-            $templatePath = Storage::path($template->image_path);
+            $templatePath = Storage::disk('local')->path($template->image_path);
             if (! file_exists($templatePath)) {
                 throw new \RuntimeException('Fail template sijil tidak dijumpai di storage.');
             }
 
-            $image = $this->manager->read($templatePath);
+            $image  = $this->manager->decodePath($templatePath);
             $config = $template->config_json ?? [];
             $fields = $config['fields'] ?? [];
 
-            // Overlay name
             if (isset($fields['name'])) {
                 $this->writeText($image, $certificate->participant->name, $fields['name']);
+                $this->writeIcBelow($image, $certificate->participant->no_kp, $fields['name']);
             }
 
-            // Overlay certificate number if configured
             if (isset($fields['certificate_no']) && $certificate->certificate_no) {
                 $this->writeText($image, $certificate->certificate_no, $fields['certificate_no']);
             }
@@ -54,8 +54,9 @@ class CertificateService
             $outputDir  = 'certificates/' . $certificate->program_id;
             $outputFile = $outputDir . '/' . $certificate->uuid . '.jpg';
 
-            Storage::makeDirectory($outputDir);
+            Storage::disk('local')->makeDirectory($outputDir);
-            $image->toJpeg(90)->save(Storage::path($outputFile));
+            $image->encode(new JpegEncoder(90))
+                  ->save(Storage::disk('local')->path($outputFile));
 
             $certificate->update([
                 'file_path'    => $outputFile,
@@ -71,40 +72,56 @@ class CertificateService
         }
     }
 
-    public function generatePreview(CertificateTemplate $template, string $sampleName, string $sampleNo = ''): string
+    public function generatePreview(CertificateTemplate $template, string $sampleName, string $sampleNo = '', ?array $overrideFields = null, string $sampleIc = '800808-08-8888'): string
     {
-        $templatePath = Storage::path($template->image_path);
+        $templatePath = Storage::disk('local')->path($template->image_path);
-        $image = $this->manager->read($templatePath);
+        $image  = $this->manager->decodePath($templatePath);
-        $config = $template->config_json ?? [];
+        $fields = $overrideFields ?? ($template->config_json['fields'] ?? []);
-        $fields = $config['fields'] ?? [];
 
         if (isset($fields['name'])) {
             $this->writeText($image, $sampleName, $fields['name']);
+            $this->writeIcBelow($image, $sampleIc, $fields['name']);
         }
 
-        if (isset($fields['certificate_no']) && $sampleNo) {
+        if (isset($fields['certificate_no'])) {
-            $this->writeText($image, $sampleNo, $fields['certificate_no']);
+            $this->writeText($image, $sampleNo ?: 'ECT/2025/0001', $fields['certificate_no']);
         }
 
-        return $image->toJpeg(85)->toString();
+        return $image->encode(new JpegEncoder(85))->toString();
     }
 
-    private function writeText(\Intervention\Image\Image $image, string $text, array $cfg): void
+    // Tulis IC di bawah nama — auto-posisi Y, saiz font dari config atau fallback 70%
+    private function writeIcBelow(\Intervention\Image\Interfaces\ImageInterface $image, string $ic, array $nameCfg): void
+    {
+        $nameFontSize = (int) ($nameCfg['font_size'] ?? 48);
+        $icFontSize   = isset($nameCfg['ic_font_size']) && (int) $nameCfg['ic_font_size'] > 0
+                        ? (int) $nameCfg['ic_font_size']
+                        : (int) round($nameFontSize * 0.7);
+
+        $icY = (int) ($nameCfg['y'] ?? 0) + (int) round($nameFontSize * 1.5);
+
+        $this->writeText($image, $ic, array_merge($nameCfg, [
+            'font_size'  => $icFontSize,
+            'y'          => $icY,
+            'font_file'  => $nameCfg['font_file'] ?? 'DejaVuSans.ttf',
+        ]));
+    }
+
+    private function writeText(\Intervention\Image\Interfaces\ImageInterface $image, string $text, array $cfg): void
     {
         $fontFile  = $this->resolveFontPath($cfg['font_file'] ?? 'DejaVuSans-Bold.ttf');
-        $fontSize  = (int)   ($cfg['font_size']   ?? 48);
+        $fontSize  = (int)   ($cfg['font_size']  ?? 48);
-        $fontColor = (string)($cfg['font_color']  ?? '#000000');
+        $fontColor = (string)($cfg['font_color'] ?? '#000000');
-        $align     = (string)($cfg['align']       ?? 'center');
+        $align     = (string)($cfg['align']      ?? 'center');
         $valign    = (string)($cfg['valign']      ?? 'top');
-        $x         = (int)   ($cfg['x']           ?? 0);
+        $x         = (int)   ($cfg['x']          ?? 0);
-        $y         = (int)   ($cfg['y']            ?? 0);
+        $y         = (int)   ($cfg['y']           ?? 0);
 
         $image->text($text, $x, $y, function (FontFactory $font) use ($fontFile, $fontSize, $fontColor, $align, $valign) {
             $font->filename($fontFile);
             $font->size($fontSize);
             $font->color($fontColor);
-            $font->align($align);
+            $font->align($align, $valign);  // v4: satu kaedah untuk horizontal + vertical
-            $font->valign($valign);
         });
     }
 

app/Services/QrCodeService.php

@@ -12,25 +12,21 @@ class QrCodeService
 {
     public function generateForProgram(Program $program): ProgramQrCode
     {
-        // Deactivate existing active QR codes
         $program->qrCodes()->where('is_active', true)->update(['is_active' => false]);
 
-        $token   = Str::random(48);
+        $token = Str::random(48);
-        $url     = route('public.checkin.show', $token);
+        $url   = route('public.checkin.show', $token);
-        $path    = 'public/qrcodes/' . $token . '.png';
+        $path  = 'qrcodes/' . $token . '.png';
-        $absPath = Storage::path($path);
 
-        // Ensure directory exists
+        Storage::disk('public')->makeDirectory('qrcodes');
-        Storage::makeDirectory('public/qrcodes');
 
-        // Generate QR code PNG (400×400, with quiet zone)
         $png = QrCode::format('png')
                      ->size(400)
                      ->margin(2)
                      ->errorCorrection('H')
                      ->generate($url);
 
-        Storage::put($path, $png);
+        Storage::disk('public')->put($path, $png);
 
         return $program->qrCodes()->create([
             'token'         => $token,
@@ -41,11 +37,11 @@ class QrCodeService
 
     public function getPublicUrl(ProgramQrCode $qrCode): string
     {
-        return Storage::url($qrCode->qr_image_path);
+        return Storage::disk('public')->url($qrCode->qr_image_path);
     }
 
     public function getRawPng(ProgramQrCode $qrCode): string
     {
-        return Storage::get($qrCode->qr_image_path);
+        return Storage::disk('public')->get($qrCode->qr_image_path);
     }
 }

database/migrations/2026_05_18_161355_add_parent_and_labels_to_questionnaire_questions.php

@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('questionnaire_questions', function (Blueprint $table) {
+            $table->foreignId('parent_id')
+                  ->nullable()
+                  ->after('questionnaire_set_id')
+                  ->constrained('questionnaire_questions')
+                  ->cascadeOnDelete();
+
+            $table->json('rating_labels')->nullable()->after('options_json');
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('questionnaire_questions', function (Blueprint $table) {
+            $table->dropForeign(['parent_id']);
+            $table->dropColumn(['parent_id', 'rating_labels']);
+        });
+    }
+};

database/migrations/2026_05_18_163447_add_tajuk_to_question_type_enum.php

@@ -0,0 +1,17 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Support\Facades\DB;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        DB::statement("ALTER TABLE questionnaire_questions MODIFY COLUMN question_type ENUM('tajuk','rating','single_choice','multiple_choice','short_text','long_text') NOT NULL");
+    }
+
+    public function down(): void
+    {
+        DB::statement("ALTER TABLE questionnaire_questions MODIFY COLUMN question_type ENUM('rating','single_choice','multiple_choice','short_text','long_text') NOT NULL");
+    }
+};

database/seeders/AdminSeeder.php

@@ -11,14 +11,14 @@ class AdminSeeder extends Seeder
     public function run(): void
     {
         User::firstOrCreate(
-            ['email' => 'admin@mbip.gov.my'],
+            ['email' => 'saufi@mbip.gov.my'],
             [
                 'name'     => 'Admin eCert MBIP',
-                'password' => Hash::make('Admin@MBIP2025!'),
+                'password' => Hash::make('YongTauFu26'),
                 'role'     => 'super_admin',
             ]
         );
 
-        $this->command->info('Admin account created: admin@mbip.gov.my / Admin@MBIP2025!');
+        $this->command->info('Admin account created: saufi@mbip.gov.my / YongTauFu26');
     }
 }

docker-compose.prod.yml

@@ -4,12 +4,14 @@
 # Penggunaan:
 #   docker compose -f docker-compose.yml -f docker-compose.prod.yml up -d --build
 #
+# DB external: 172.17.200.16:3306
+# Dalam .env (production): DB_HOST=172.17.200.16
+#
 # Perbezaan dari dev:
 #   • APP_ENV=production, APP_DEBUG=false
-#   • DB port TIDAK didedahkan ke host
+#   • Storage sijil/template dalam named volume (kekal semasa redeploy)
-#   • Storage sijil/template disimpan dalam named volume (kekal semasa deploy)
-#   • Opcache validate_timestamps=0 (prestasi)
 #   • php-dev.ini tidak dimuat
+#   • extra_hosts dibuang (IP terus boleh dicapai dari container)
 ###############################################################################
 name: ecert
 
@@ -20,15 +22,13 @@ services:
     container_name: ecert_app
     restart: always
     volumes:
-      # Kod dari server (git pull)
       - .:/var/www
-      # php.ini sahaja (tanpa php-dev.ini)
       - ./docker/php/php.ini:/usr/local/etc/php/conf.d/99-ecert.ini:ro
-      # Storage kekal semasa redeploy
       - storage_data:/var/www/storage
     environment:
       APP_ENV:   production
       APP_DEBUG: "false"
+    extra_hosts: []    # buang host.docker.internal, guna IP terus
 
   # ── Nginx (production) ─────────────────────────────────────────────────────
   nginx:
@@ -37,17 +37,8 @@ services:
     volumes:
       - .:/var/www:ro
       - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
-      # Mount storage supaya nginx boleh serve fail statik jika perlu
       - storage_data:/var/www/storage:ro
 
-  # ── MySQL (production) ─────────────────────────────────────────────────────
-  db:
-    container_name: ecert_db
-    restart: always
-    ports: []    # Jangan dedahkan DB port ke luar dalam production
-    volumes:
-      - dbdata:/var/lib/mysql
-
   # ── Queue Worker (production) ──────────────────────────────────────────────
   queue:
     container_name: ecert_queue
@@ -58,6 +49,7 @@ services:
       - storage_data:/var/www/storage
     environment:
       APP_ENV: production
+    extra_hosts: []
 
 ###############################################################################
 volumes:

docker-compose.yml

@@ -1,11 +1,15 @@
 ###############################################################################
-# eCert MBIP — Docker Compose (Development — Windows 11 / Linux)
+# eCert MBIP — Docker Compose (Development — Windows 11)
 #
 # Penggunaan:
 #   docker compose up -d --build
 #
-# Aplikasi:    http://localhost:8003
+# Aplikasi: http://localhost:8003
-# DB (host):   localhost:33060  (untuk TablePlus / HeidiSQL)
+# DB       : host.docker.internal:3306  (MySQL pada Windows host)
+#
+# NOTA: Dari dalam container, MySQL pada Windows tidak boleh guna "localhost".
+#       Kena guna host.docker.internal (disediakan oleh Docker Desktop).
+#       Dalam .env: DB_HOST=host.docker.internal
 ###############################################################################
 name: ecert
 
@@ -28,9 +32,8 @@ services:
     environment:
       APP_ENV: local
       APP_DEBUG: "true"
-    depends_on:
+    extra_hosts:
-      db:
+      - "host.docker.internal:host-gateway"   # pastikan resolusi host pada Linux juga
-        condition: service_healthy
     networks:
       - ecert
 
@@ -49,37 +52,6 @@ services:
     networks:
       - ecert
 
-  # ── MySQL 8.0 ──────────────────────────────────────────────────────────────
-  db:
-    image: mysql:8.0
-    container_name: ecert_db
-    restart: unless-stopped
-    environment:
-      MYSQL_DATABASE:      ${DB_DATABASE:-ecert_mbip}
-      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD:-secret}
-      MYSQL_USER:          ${DB_USERNAME:-ecert}
-      MYSQL_PASSWORD:      ${DB_PASSWORD:-secret}
-    volumes:
-      - dbdata:/var/lib/mysql
-    ports:
-      - "33060:3306"    # port host 33060 → elak konflik dengan MySQL tempatan (3306)
-    healthcheck:
-      test:
-        - CMD
-        - mysqladmin
-        - ping
-        - -h
-        - localhost
-        - -u
-        - root
-        - --password=${DB_PASSWORD:-secret}
-      interval: 5s
-      timeout: 5s
-      retries: 15
-      start_period: 20s
-    networks:
-      - ecert
-
   # ── Queue Worker ───────────────────────────────────────────────────────────
   queue:
     build:
@@ -95,7 +67,8 @@ services:
       - .env
     environment:
       APP_ENV: local
-    # Override entrypoint: langkau migrate/seed (app container dah buat)
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
     entrypoint: []
     command:
       - php
@@ -106,10 +79,7 @@ services:
       - --max-time=3600
       - --timeout=90
     depends_on:
-      db:
+      - app
-        condition: service_healthy
-      app:
-        condition: service_started
     networks:
       - ecert
 
@@ -117,7 +87,3 @@ services:
 networks:
   ecert:
     driver: bridge
-
-volumes:
-  dbdata:
-    driver: local

docker/entrypoint.sh

@@ -18,7 +18,7 @@ echo "╚═══════════════════════
 echo ""
 
 # ── 1. Tunggu MySQL bersedia ──────────────────────────────────────────────────
-DB_HOST="${DB_HOST:-db}"
+DB_HOST="${DB_HOST:-host.docker.internal}"
 DB_PORT="${DB_PORT:-3306}"
 DB_DATABASE="${DB_DATABASE:-ecert_mbip}"
 DB_USERNAME="${DB_USERNAME:-root}"
@@ -26,12 +26,18 @@ DB_PASSWORD="${DB_PASSWORD:-secret}"
 
 echo "⏳ Menunggu MySQL di ${DB_HOST}:${DB_PORT}..."
 
-until mysqladmin ping \
+until php -r "
-    -h "${DB_HOST}" \
+    try {
-    -P "${DB_PORT}" \
+        new PDO(
-    -u "${DB_USERNAME}" \
+            'mysql:host=${DB_HOST};port=${DB_PORT};dbname=${DB_DATABASE}',
-    --password="${DB_PASSWORD}" \
+            '${DB_USERNAME}',
-    --silent 2>/dev/null; do
+            '${DB_PASSWORD}'
+        );
+        exit(0);
+    } catch (Exception \$e) {
+        exit(1);
+    }
+" 2>/dev/null; do
     printf "."
     sleep 2
 done

resources/views/admin/profile/show.blade.php

@@ -0,0 +1,137 @@
+@extends('layouts.admin')
+
+@section('title', 'Profil Saya')
+@section('header', 'Profil Saya')
+
+@section('breadcrumb')
+<li class="breadcrumb-item active">Profil</li>
+@endsection
+
+@section('content')
+
+<div class="row g-4" style="max-width:760px;">
+
+    {{-- Account Info --}}
+    <div class="col-12">
+        <div class="card border-0 shadow-sm">
+            <div class="card-body d-flex align-items-center gap-3 py-3">
+                <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center flex-shrink-0"
+                     style="width:52px;height:52px;">
+                    <i class="bi bi-person-fill text-primary fs-4"></i>
+                </div>
+                <div>
+                    <div class="fw-semibold">{{ $user->name }}</div>
+                    <div class="text-muted small">{{ $user->email }}</div>
+                    <span class="badge {{ $user->isSuperAdmin() ? 'bg-danger' : 'bg-primary' }} mt-1">
+                        {{ $user->isSuperAdmin() ? 'Super Admin' : 'Admin Program' }}
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    {{-- Update Email --}}
+    <div class="col-md-6">
+        <div class="card border-0 shadow-sm h-100">
+            <div class="card-header bg-white py-3">
+                <h6 class="mb-0 fw-semibold">
+                    <i class="bi bi-envelope me-2 text-primary"></i>Tukar Alamat Emel
+                </h6>
+            </div>
+            <div class="card-body">
+
+                @if(session('email_success'))
+                <div class="alert alert-success small py-2">
+                    <i class="bi bi-check-circle me-1"></i>{{ session('email_success') }}
+                </div>
+                @endif
+
+                <form method="POST" action="{{ route('admin.profile.update-email') }}">
+                    @csrf @method('PUT')
+
+                    <div class="mb-3">
+                        <label class="form-label small fw-medium">Kata Laluan Semasa <span class="text-danger">*</span></label>
+                        <input type="password" name="current_password" autocomplete="current-password"
+                               class="form-control form-control-sm @error('current_password', 'email') is-invalid @enderror"
+                               placeholder="••••••••">
+                        @error('current_password', 'email')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                        @enderror
+                    </div>
+
+                    <div class="mb-3">
+                        <label class="form-label small fw-medium">Emel Baru <span class="text-danger">*</span></label>
+                        <input type="email" name="email" autocomplete="email"
+                               class="form-control form-control-sm @error('email', 'email') is-invalid @enderror"
+                               value="{{ old('email', $user->email) }}"
+                               placeholder="emel@contoh.com">
+                        @error('email', 'email')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                        @enderror
+                    </div>
+
+                    <button type="submit" class="btn btn-primary btn-sm w-100">
+                        <i class="bi bi-check-lg me-1"></i> Kemaskini Emel
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    {{-- Update Password --}}
+    <div class="col-md-6">
+        <div class="card border-0 shadow-sm h-100">
+            <div class="card-header bg-white py-3">
+                <h6 class="mb-0 fw-semibold">
+                    <i class="bi bi-key me-2 text-primary"></i>Tukar Kata Laluan
+                </h6>
+            </div>
+            <div class="card-body">
+
+                @if(session('password_success'))
+                <div class="alert alert-success small py-2">
+                    <i class="bi bi-check-circle me-1"></i>{{ session('password_success') }}
+                </div>
+                @endif
+
+                <form method="POST" action="{{ route('admin.profile.update-password') }}">
+                    @csrf @method('PUT')
+
+                    <div class="mb-3">
+                        <label class="form-label small fw-medium">Kata Laluan Semasa <span class="text-danger">*</span></label>
+                        <input type="password" name="current_password" autocomplete="current-password"
+                               class="form-control form-control-sm @error('current_password', 'password') is-invalid @enderror"
+                               placeholder="••••••••">
+                        @error('current_password', 'password')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                        @enderror
+                    </div>
+
+                    <div class="mb-3">
+                        <label class="form-label small fw-medium">Kata Laluan Baru <span class="text-danger">*</span></label>
+                        <input type="password" name="password" autocomplete="new-password"
+                               class="form-control form-control-sm @error('password', 'password') is-invalid @enderror"
+                               placeholder="Min. 8 aksara">
+                        @error('password', 'password')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                        @enderror
+                    </div>
+
+                    <div class="mb-3">
+                        <label class="form-label small fw-medium">Sahkan Kata Laluan Baru <span class="text-danger">*</span></label>
+                        <input type="password" name="password_confirmation" autocomplete="new-password"
+                               class="form-control form-control-sm"
+                               placeholder="••••••••">
+                    </div>
+
+                    <button type="submit" class="btn btn-primary btn-sm w-100">
+                        <i class="bi bi-check-lg me-1"></i> Tukar Kata Laluan
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+@endsection

resources/views/admin/programs/qr.blade.php

@@ -22,7 +22,7 @@
                 @if($qrCode)
                 {{-- QR Code Image --}}
                 <div class="mb-4">
-                    <img src="{{ Storage::url($qrCode->qr_image_path) }}"
+                    <img src="{{ Storage::disk('public')->url($qrCode->qr_image_path) }}"
                          alt="QR Code {{ $program->title }}"
                          class="img-fluid border rounded p-2"
                          style="max-width: 280px;">

resources/views/admin/programs/questionnaire/preview.blade.php

@@ -0,0 +1,151 @@
+@extends('layouts.public')
+
+@section('title', 'Pratonton Soalselidik — ' . $program->title)
+
+@section('hero')
+<h4 class="mb-1">{{ $program->title }}</h4>
+<div class="opacity-75 small">
+    <i class="bi bi-clipboard2-check me-1"></i>Borang Penilaian Program
+</div>
+@endsection
+
+@push('styles')
+<style>
+    .preview-banner {
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+        background: #fff3cd;
+        border-bottom: 2px solid #ffc107;
+        padding: .6rem 1rem;
+        text-align: center;
+        font-size: .85rem;
+        font-weight: 600;
+        color: #664d03;
+    }
+    .preview-banner i { margin-right: .4rem; }
+    fieldset { border: none; padding: 0; margin: 0; }
+</style>
+@endpush
+
+@section('content')
+
+<div class="preview-banner">
+    <i class="bi bi-eye"></i>PRATONTON ADMIN — Borang ini tidak akan dihantar
+    <button type="button" class="btn btn-sm btn-outline-secondary ms-3 py-0" onclick="window.close()">
+        <i class="bi bi-x-lg me-1"></i>Tutup
+    </button>
+</div>
+
+<div class="checkin-card card p-4 mb-3 mt-3">
+    <div class="text-center mb-4">
+        <div class="rounded-circle bg-primary bg-opacity-10 d-inline-flex align-items-center justify-content-center mx-auto mb-3"
+             style="width:70px; height:70px;">
+            <i class="bi bi-clipboard2-check-fill text-primary" style="font-size:2rem;"></i>
+        </div>
+        <h5 class="fw-bold mb-1">{{ $pq->questionnaireSet->title }}</h5>
+        @if($pq->questionnaireSet->description)
+        <p class="text-muted small mb-1">{{ $pq->questionnaireSet->description }}</p>
+        @endif
+        <p class="text-muted small mb-0">
+            Sila jawab semua soalan sebelum memuat turun sijil anda, <strong>PESERTA CONTOH</strong>.
+        </p>
+    </div>
+
+    <fieldset disabled>
+
+        @php $qNum = 0; @endphp
+
+        @foreach($questions as $q)
+
+        @if($q->question_type === 'tajuk')
+        {{-- ── Section header ─────────────────────────────── --}}
+        <div class="d-flex align-items-center gap-2 mt-4 mb-3 pb-1 border-bottom">
+            <span class="fw-bold text-primary">{{ $q->question_text }}</span>
+        </div>
+
+        @foreach($q->children as $child)
+        @php $qNum++ @endphp
+        <div class="mb-4">
+            <label class="form-label fw-medium">
+                {{ $qNum }}. {{ $child->question_text }}
+                @if($child->is_required)<span class="text-danger">*</span>@endif
+            </label>
+            <div class="d-flex gap-3 flex-wrap">
+                @for($i = 1; $i <= 5; $i++)
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio"
+                           name="q_{{ $child->id }}" value="{{ $i }}">
+                    <label class="form-check-label">
+                        {{ $i }}
+                        @php $label = $q->rating_labels[$i] ?? $q->rating_labels[strval($i)] ?? ''; @endphp
+                        @if($label)
+                        <small class="text-muted d-block" style="font-size:.7rem;">({{ $label }})</small>
+                        @endif
+                    </label>
+                </div>
+                @endfor
+            </div>
+        </div>
+        @endforeach
+
+        @else
+        {{-- ── Standalone question ─────────────────────────── --}}
+        @php $qNum++ @endphp
+        <div class="mb-4">
+            <label class="form-label fw-medium">
+                {{ $qNum }}. {{ $q->question_text }}
+                @if($q->is_required)<span class="text-danger">*</span>@endif
+            </label>
+
+            @if($q->question_type === 'rating')
+            <div class="d-flex gap-3 flex-wrap">
+                @for($i = 1; $i <= 5; $i++)
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio" name="q_{{ $q->id }}" value="{{ $i }}">
+                    <label class="form-check-label">
+                        {{ $i }}
+                        @if($i === 1)<small class="text-muted">(Sangat Tidak Setuju)</small>
+                        @elseif($i === 5)<small class="text-muted">(Sangat Setuju)</small>
+                        @endif
+                    </label>
+                </div>
+                @endfor
+            </div>
+
+            @elseif($q->question_type === 'single_choice')
+            @foreach($q->options_json ?? [] as $opt)
+            <div class="form-check">
+                <input class="form-check-input" type="radio" name="q_{{ $q->id }}" value="{{ $opt }}">
+                <label class="form-check-label">{{ $opt }}</label>
+            </div>
+            @endforeach
+
+            @elseif($q->question_type === 'multiple_choice')
+            @foreach($q->options_json ?? [] as $opt)
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" name="q_{{ $q->id }}[]" value="{{ $opt }}">
+                <label class="form-check-label">{{ $opt }}</label>
+            </div>
+            @endforeach
+
+            @elseif($q->question_type === 'short_text')
+            <input type="text" class="form-control" placeholder="Jawapan anda...">
+
+            @elseif($q->question_type === 'long_text')
+            <textarea class="form-control" rows="4" placeholder="Jawapan anda..."></textarea>
+            @endif
+        </div>
+        @endif
+
+        @endforeach
+
+    </fieldset>
+
+    <div class="alert alert-warning d-flex align-items-center gap-2 mb-0 mt-2">
+        <i class="bi bi-eye-fill flex-shrink-0"></i>
+        <span class="small">Ini adalah <strong>pratonton admin</strong>. Borang ini tidak boleh dihantar.</span>
+    </div>
+</div>
+
+@endsection

resources/views/admin/programs/questionnaire/show.blade.php

@@ -10,9 +10,17 @@
 @endsection
 
 @section('header-actions')
-<a href="{{ route('admin.programs.show', $program) }}#tab-questionnaire" class="btn btn-sm btn-outline-secondary">
+<div class="d-flex gap-2">
-    <i class="bi bi-arrow-left me-1"></i> Kembali
+    @if($pq && $pq->questionnaireSet)
-</a>
+    <a href="{{ route('admin.programs.questionnaire.preview', $program) }}" target="_blank"
+       class="btn btn-sm btn-outline-primary">
+        <i class="bi bi-eye me-1"></i> Pratonton
+    </a>
+    @endif
+    <a href="{{ route('admin.programs.show', $program) }}#tab-questionnaire" class="btn btn-sm btn-outline-secondary">
+        <i class="bi bi-arrow-left me-1"></i> Kembali
+    </a>
+</div>
 @endsection
 
 @section('content')
@@ -68,25 +76,48 @@
                 {{-- List Questions --}}
                 <div class="border rounded p-3 bg-light">
                     <div class="small fw-medium text-muted mb-2">Senarai Soalan:</div>
-                    @foreach($pq->questionnaireSet->questions as $q)
+                    @php
-                    <div class="d-flex align-items-start gap-2 mb-2">
+                        $allQs   = $pq->questionnaireSet->questions->sortBy('sort_order');
-                        <span class="badge bg-secondary flex-shrink-0">{{ $loop->iteration }}</span>
+                        $topQs   = $allQs->whereNull('parent_id');
-                        <div>
+                        $qNum    = 0;
-                            <div class="small">{{ $q->question_text }}</div>
+                    @endphp
-                            <span class="badge bg-light text-dark border" style="font-size:0.65rem;">
+                    @foreach($topQs as $q)
-                                {{ match($q->question_type) {
+                        @if($q->question_type === 'tajuk')
-                                    'rating' => 'Rating',
+                        <div class="d-flex align-items-center gap-2 mt-2 mb-1">
-                                    'single_choice' => 'Pilihan Tunggal',
+                            <span class="badge bg-dark" style="font-size:0.6rem;">Tajuk</span>
-                                    'multiple_choice' => 'Pilihan Berganda',
+                            <div class="small fw-semibold text-dark">{{ $q->question_text }}</div>
-                                    'short_text' => 'Teks Pendek',
-                                    'long_text' => 'Teks Panjang',
-                                } }}
-                            </span>
-                            @if($q->is_required)
-                            <span class="badge bg-danger bg-opacity-10 text-danger" style="font-size:0.65rem;">Wajib</span>
-                            @endif
                         </div>
-                    </div>
+                        @foreach($allQs->where('parent_id', $q->id)->sortBy('sort_order') as $child)
+                        @php $qNum++ @endphp
+                        <div class="d-flex align-items-start gap-2 mb-1 ps-3">
+                            <span class="badge bg-secondary flex-shrink-0" style="min-width:22px;font-size:0.65rem;">{{ $qNum }}</span>
+                            <div>
+                                <div class="small">{{ $child->question_text }}</div>
+                                <span class="badge bg-light text-dark border" style="font-size:0.6rem;">Rating 1–5</span>
+                                @if($child->is_required)<span class="badge bg-danger bg-opacity-10 text-danger" style="font-size:0.6rem;">Wajib</span>@endif
+                            </div>
+                        </div>
+                        @endforeach
+                        @else
+                        @php $qNum++ @endphp
+                        <div class="d-flex align-items-start gap-2 mb-2">
+                            <span class="badge bg-secondary flex-shrink-0" style="min-width:22px;font-size:0.65rem;">{{ $qNum }}</span>
+                            <div>
+                                <div class="small">{{ $q->question_text }}</div>
+                                <span class="badge bg-light text-dark border" style="font-size:0.65rem;">
+                                    {{ match($q->question_type) {
+                                        'rating'          => 'Rating 1–5',
+                                        'single_choice'   => 'Pilihan Tunggal',
+                                        'multiple_choice' => 'Pilihan Berganda',
+                                        'short_text'      => 'Teks Pendek',
+                                        'long_text'       => 'Teks Panjang',
+                                        default           => $q->question_type,
+                                    } }}
+                                </span>
+                                @if($q->is_required)<span class="badge bg-danger bg-opacity-10 text-danger" style="font-size:0.65rem;">Wajib</span>@endif
+                            </div>
+                        </div>
+                        @endif
                     @endforeach
                 </div>
 

resources/views/admin/programs/show.blade.php

@@ -168,7 +168,7 @@
     <div class="tab-pane fade" id="tab-qr">
         @if($program->qrCode)
         <div class="text-center py-3">
-            <img src="{{ Storage::url($program->qrCode->qr_image_path) }}"
+            <img src="{{ Storage::disk('public')->url($program->qrCode->qr_image_path) }}"
                  alt="QR Code" class="img-fluid mb-3" style="max-width:220px;">
             <div class="d-flex justify-content-center gap-2">
                 <a href="{{ route('admin.programs.qr.download', $program) }}" class="btn btn-sm btn-outline-primary">
@@ -210,7 +210,7 @@
             </a>
         </div>
         <div class="text-center">
-            <img src="{{ Storage::url($program->certificateTemplate->image_path) }}"
+            <img src="{{ route('admin.programs.template.preview', $program) }}"
                  alt="Template" class="img-fluid rounded border" style="max-height:300px;">
         </div>
         @else

resources/views/admin/programs/template/show.blade.php

@@ -17,14 +17,71 @@
 
 @section('content')
 
-<div class="row g-4">
+@php
-    {{-- Left: Current template --}}
+    $config    = $template?->config_json ?? [];
-    <div class="col-md-7">
+    $fields    = $config['fields'] ?? [];
+    $imgWidth  = $config['width']  ?? 0;
+    $imgHeight = $config['height'] ?? 0;
+    $isPortrait = $imgHeight > $imgWidth && $imgWidth > 0;
+@endphp
 
-        @if($template)
+{{-- ── Panduan Template (atas, boleh lipat) ────────────────────────────── --}}
-        <div class="card border-0 shadow-sm mb-4">
+<div class="card border-0 bg-light mb-4">
+    <div class="card-header bg-transparent border-0 py-2 d-flex justify-content-between align-items-center"
+         role="button" data-bs-toggle="collapse" data-bs-target="#guidePanel" aria-expanded="false">
+        <span class="fw-semibold small"><i class="bi bi-info-circle me-2 text-primary"></i>Panduan Template</span>
+        <i class="bi bi-chevron-down small text-muted" id="guideChevron"></i>
+    </div>
+    <div class="collapse" id="guidePanel">
+        <div class="card-body pt-0 pb-3">
+            <div class="row g-3">
+                <div class="col-md-4">
+                    <div class="d-flex gap-2">
+                        <i class="bi bi-aspect-ratio text-primary mt-1 flex-shrink-0"></i>
+                        <div class="small text-muted">
+                            Resolusi disyorkan <strong>1754 × 1240px</strong> (A4 landscape 150dpi)
+                            atau <strong>1240 × 1754px</strong> (portrait).
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="d-flex gap-2">
+                        <i class="bi bi-cursor text-primary mt-1 flex-shrink-0"></i>
+                        <div class="small text-muted">
+                            Koordinat <strong>(0, 0)</strong> adalah sudut kiri atas imej.
+                            X bertambah ke kanan, Y bertambah ke bawah.
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="d-flex gap-2">
+                        <i class="bi bi-eye text-primary mt-1 flex-shrink-0"></i>
+                        <div class="small text-muted">
+                            Guna butang <strong>Pratonton</strong> untuk semak kedudukan teks
+                            sebelum jana sijil sebenar.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@if($template)
+
+{{-- ── Template Aktif (kiri) + Konfigurasi (kanan) ─────────────────────── --}}
+<div class="row g-4">
+
+    {{-- Kiri: Template Aktif --}}
+    <div class="col-lg-6">
+        <div class="card border-0 shadow-sm h-100">
             <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
-                <h6 class="mb-0 fw-semibold"><i class="bi bi-image me-2 text-primary"></i>Template Aktif</h6>
+                <div class="d-flex align-items-center gap-2">
+                    <h6 class="mb-0 fw-semibold"><i class="bi bi-image me-2 text-primary"></i>Template Aktif</h6>
+                    <span id="orientationBadge" class="badge bg-secondary" style="font-size:.7rem;">
+                        {{ $isPortrait ? 'Portrait' : ($imgWidth > 0 ? 'Landscape' : '—') }}
+                    </span>
+                </div>
                 <form method="POST" action="{{ route('admin.programs.template.destroy', $program) }}"
                       onsubmit="return confirm('Padam template sijil ini? Tindakan ini tidak boleh diundur.')">
                     @csrf @method('DELETE')
@@ -33,52 +90,64 @@
                     </button>
                 </form>
             </div>
-            <div class="card-body">
+            <div class="card-body d-flex flex-column">
-                <div class="text-center mb-3">
+
-                    <div class="cert-preview-wrapper border rounded overflow-hidden" style="max-height:380px;">
+                {{-- Image viewer — tinggi berubah ikut orientasi --}}
-                        <img src="{{ route('admin.programs.template.preview', $program) }}"
+                <div id="previewWrapper"
-                             id="templatePreview"
+                     class="border rounded overflow-hidden mb-2 d-flex align-items-center justify-content-center bg-light"
-                             alt="Template Preview"
+                     style="max-height:{{ $isPortrait ? '520px' : '340px' }}; transition: max-height .3s ease;">
-                             class="img-fluid w-100"
+                    <img src="{{ route('admin.programs.template.preview', $program) }}"
-                             style="object-fit:contain;">
+                         id="templatePreview"
-                    </div>
+                         alt="Template Preview"
-                    <div class="mt-2 text-muted small">{{ $template->original_filename }}</div>
+                         class="img-fluid"
+                         style="max-width:100%; max-height:{{ $isPortrait ? '520px' : '340px' }}; object-fit:contain;">
+                </div>
+                <div class="text-muted small text-center mb-3">
+                    {{ $template->original_filename }}
+                    @if($imgWidth > 0)
+                    &nbsp;·&nbsp;<span id="dimensionLabel">{{ $imgWidth }} × {{ $imgHeight }} px</span>
+                    @endif
                 </div>
 
-                {{-- Test Generate --}}
+                {{-- Jana Pratonton --}}
-                <div class="border rounded p-3 bg-light">
+                <div class="border rounded p-3 bg-light mt-auto">
-                    <label class="form-label small fw-medium">Jana Pratonton</label>
+                    <label class="form-label small fw-medium mb-2">Jana Pratonton</label>
                     <div class="row g-2">
                         <div class="col-8">
                             <input type="text" id="sampleName" class="form-control form-control-sm"
                                    value="NAMA PESERTA CONTOH" placeholder="Nama untuk pratonton">
                         </div>
                         <div class="col-4">
-                            <button type="button" id="previewBtn" class="btn btn-sm btn-primary w-100" onclick="loadPreview()">
+                            <button type="button" id="previewBtn" class="btn btn-sm btn-primary w-100"
+                                    onclick="loadPreview()">
                                 <i class="bi bi-eye me-1"></i> Pratonton
                             </button>
                         </div>
                     </div>
                 </div>
+
             </div>
         </div>
+    </div>
 
-        {{-- Config Editor --}}
+    {{-- Kanan: Konfigurasi Kedudukan Teks --}}
-        <div class="card border-0 shadow-sm">
+    <div class="col-lg-6">
+        <div class="card border-0 shadow-sm h-100">
             <div class="card-header bg-white py-3">
                 <h6 class="mb-0 fw-semibold"><i class="bi bi-sliders me-2 text-warning"></i>Konfigurasi Kedudukan Teks</h6>
             </div>
             <div class="card-body">
-                @php $config = $template->config_json ?? []; $fields = $config['fields'] ?? []; @endphp
+                <p class="text-muted small mb-3">
+                    Koordinat X dan Y dikira dari sudut kiri atas imej (piksel).
+                    @if($imgWidth > 0)
+                    Saiz imej: <strong>{{ $imgWidth }} × {{ $imgHeight }} px</strong>.
+                    @endif
+                </p>
+
                 <form method="POST" action="{{ route('admin.programs.template.config', $program) }}">
                     @csrf @method('PUT')
 
-                    <p class="text-muted small mb-3">
+                    {{-- Nama Peserta --}}
-                        Koordinat X dan Y dikira dari sudut kiri atas imej (piksel).
-                        Imej template: <strong>{{ $config['width'] ?? '—' }} × {{ $config['height'] ?? '—' }}</strong> piksel.
-                    </p>
-
-                    {{-- Name field --}}
                     <div class="card border mb-3">
                         <div class="card-header py-2 bg-light">
                             <span class="fw-medium small">Nama Peserta</span>
@@ -86,12 +155,12 @@
                         <div class="card-body py-3">
                             <div class="row g-2">
                                 <div class="col-4">
-                                    <label class="form-label small">X (Piksel)</label>
+                                    <label class="form-label small">X (px)</label>
                                     <input type="number" name="fields[name][x]" class="form-control form-control-sm"
                                            value="{{ $fields['name']['x'] ?? 800 }}">
                                 </div>
                                 <div class="col-4">
-                                    <label class="form-label small">Y (Piksel)</label>
+                                    <label class="form-label small">Y (px)</label>
                                     <input type="number" name="fields[name][y]" class="form-control form-control-sm"
                                            value="{{ $fields['name']['y'] ?? 400 }}">
                                 </div>
@@ -102,9 +171,16 @@
                                 </div>
                                 <div class="col-4">
                                     <label class="form-label small">Warna</label>
-                                    <input type="color" name="fields[name][font_color]" class="form-control form-control-color form-control-sm"
+                                    <input type="color" name="fields[name][font_color]"
+                                           class="form-control form-control-color form-control-sm"
                                            value="{{ $fields['name']['font_color'] ?? '#1a3a6b' }}">
                                 </div>
+                                <div class="col-4">
+                                    <label class="form-label small">Saiz Font No IC</label>
+                                    <input type="number" name="fields[name][ic_font_size]"
+                                           class="form-control form-control-sm" min="8" max="200"
+                                           value="{{ $fields['name']['ic_font_size'] ?? (int) round(($fields['name']['font_size'] ?? 52) * 0.7) }}">
+                                </div>
                                 <div class="col-4">
                                     <label class="form-label small">Align</label>
                                     <select name="fields[name][align]" class="form-select form-select-sm">
@@ -117,9 +193,9 @@
                         </div>
                     </div>
 
-                    {{-- Certificate No (optional) --}}
+                    {{-- No. Sijil (pilihan) --}}
                     <div class="card border mb-4">
-                        <div class="card-header py-2 bg-light d-flex justify-content-between">
+                        <div class="card-header py-2 bg-light d-flex justify-content-between align-items-center">
                             <span class="fw-medium small">No. Sijil <span class="text-muted">(Pilihan)</span></span>
                             <div class="form-check form-switch mb-0">
                                 <input class="form-check-input" type="checkbox" id="showCertNo"
@@ -128,15 +204,16 @@
                                 <label class="form-check-label small" for="showCertNo">Papar</label>
                             </div>
                         </div>
-                        <div class="card-body py-3" id="certNoFields" {{ isset($fields['certificate_no']) ? '' : 'style=display:none' }}>
+                        <div class="card-body py-3" id="certNoFields"
+                             {{ isset($fields['certificate_no']) ? '' : 'style=display:none' }}>
                             <div class="row g-2">
                                 <div class="col-4">
-                                    <label class="form-label small">X</label>
+                                    <label class="form-label small">X (px)</label>
                                     <input type="number" name="fields[certificate_no][x]" class="form-control form-control-sm"
                                            value="{{ $fields['certificate_no']['x'] ?? 800 }}">
                                 </div>
                                 <div class="col-4">
-                                    <label class="form-label small">Y</label>
+                                    <label class="form-label small">Y (px)</label>
                                     <input type="number" name="fields[certificate_no][y]" class="form-control form-control-sm"
                                            value="{{ $fields['certificate_no']['y'] ?? 460 }}">
                                 </div>
@@ -147,7 +224,8 @@
                                 </div>
                                 <div class="col-4">
                                     <label class="form-label small">Warna</label>
-                                    <input type="color" name="fields[certificate_no][font_color]" class="form-control form-control-color form-control-sm"
+                                    <input type="color" name="fields[certificate_no][font_color]"
+                                           class="form-control form-control-color form-control-sm"
                                            value="{{ $fields['certificate_no']['font_color'] ?? '#555555' }}">
                                 </div>
                                 <div class="col-4">
@@ -168,9 +246,15 @@
                 </form>
             </div>
         </div>
+    </div>
 
-        @else
+</div><!-- /.row -->
-        {{-- Upload Form --}}
+
+@else
+
+{{-- Tiada template — form upload --}}
+<div class="row g-4">
+    <div class="col-lg-7">
         <div class="card border-0 shadow-sm">
             <div class="card-header bg-white py-3">
                 <h6 class="mb-0 fw-semibold"><i class="bi bi-upload me-2 text-primary"></i>Muat Naik Template Sijil</h6>
@@ -178,11 +262,13 @@
             <div class="card-body">
                 <div class="alert alert-info small mb-4">
                     <i class="bi bi-lightbulb me-1"></i>
-                    Muat naik imej template sijil dalam format <strong>JPG atau PNG</strong>.
+                    Format <strong>JPG atau PNG</strong>, maksimum <strong>10MB</strong>.
-                    Saiz maksimum: <strong>10MB</strong>. Resolusi disyorkan: <strong>1754 × 1240px</strong> (A4 landscape 150dpi).
+                    Resolusi disyorkan: <strong>1754 × 1240px</strong> (A4 landscape) atau
+                    <strong>1240 × 1754px</strong> (portrait).
                 </div>
 
-                <form method="POST" action="{{ route('admin.programs.template.store', $program) }}" enctype="multipart/form-data">
+                <form method="POST" action="{{ route('admin.programs.template.store', $program) }}"
+                      enctype="multipart/form-data">
                     @csrf
                     <div class="mb-4">
                         <label class="form-label fw-medium">Fail Template <span class="text-danger">*</span></label>
@@ -195,7 +281,7 @@
 
                     <div id="imagePreviewBox" class="mb-4 d-none">
                         <label class="form-label small text-muted">Pratonton:</label>
-                        <div class="border rounded overflow-hidden">
+                        <div id="uploadPreviewWrapper" class="border rounded overflow-hidden">
                             <img id="imagePreviewEl" src="" alt="preview" class="img-fluid w-100">
                         </div>
                     </div>
@@ -206,46 +292,79 @@
                 </form>
             </div>
         </div>
-        @endif
-
-    </div>
-
-    {{-- Right: Tips --}}
-    <div class="col-md-5">
-        <div class="card border-0 bg-light">
-            <div class="card-body p-4">
-                <h6 class="fw-semibold mb-3"><i class="bi bi-info-circle me-2 text-primary"></i>Panduan Template</h6>
-                <ul class="small text-muted mb-0">
-                    <li class="mb-2">Gunakan imej resolusi tinggi (≥1600px lebar) untuk hasil cetak berkualiti.</li>
-                    <li class="mb-2">Pastikan ruang untuk nama peserta tidak dihalang oleh grafik template.</li>
-                    <li class="mb-2">Koordinat (0,0) adalah sudut <strong>kiri atas</strong> imej.</li>
-                    <li class="mb-2">Gunakan butang <strong>Pratonton</strong> untuk menyemak kedudukan teks sebelum jana sijil sebenar.</li>
-                    <li class="mb-0">Sijil dijana dalam format JPG.</li>
-                </ul>
-            </div>
-        </div>
     </div>
 </div>
 
+@endif
+
 @endsection
 
 @push('scripts')
 <script>
-function previewImage(input) {
+// ── Auto-detect orientasi dan laras tinggi viewer ─────────────────────────────
-    if (input.files && input.files[0]) {
+function applyOrientation(naturalW, naturalH) {
-        const reader = new FileReader();
+    const wrapper = document.getElementById('previewWrapper');
-        reader.onload = e => {
+    const img     = document.getElementById('templatePreview');
-            document.getElementById('imagePreviewEl').src = e.target.result;
+    const badge   = document.getElementById('orientationBadge');
-            document.getElementById('imagePreviewBox').classList.remove('d-none');
+    if (!wrapper || !img) return;
-        };
+
-        reader.readAsDataURL(input.files[0]);
+    const isPortrait = naturalH > naturalW;
+    const maxH       = isPortrait ? '520px' : '340px';
+
+    wrapper.style.maxHeight = maxH;
+    img.style.maxHeight     = maxH;
+
+    if (badge) {
+        badge.textContent  = isPortrait ? 'Portrait' : 'Landscape';
+        badge.className    = 'badge ' + (isPortrait ? 'bg-info' : 'bg-success');
     }
 }
 
+// Jalankan sekali apabila imej template dimuatkan
+const templateImg = document.getElementById('templatePreview');
+if (templateImg) {
+    if (templateImg.complete && templateImg.naturalWidth) {
+        applyOrientation(templateImg.naturalWidth, templateImg.naturalHeight);
+    } else {
+        templateImg.addEventListener('load', function () {
+            applyOrientation(this.naturalWidth, this.naturalHeight);
+        });
+    }
+}
+
+// ── Upload pratonton (form muat naik) ─────────────────────────────────────────
+function previewImage(input) {
+    if (!input.files || !input.files[0]) return;
+    const reader = new FileReader();
+    reader.onload = e => {
+        const el  = document.getElementById('imagePreviewEl');
+        const box = document.getElementById('imagePreviewBox');
+        el.src = e.target.result;
+        box.classList.remove('d-none');
+
+        // Laras pratonton upload ikut orientasi
+        el.onload = function () {
+            const wrap = document.getElementById('uploadPreviewWrapper');
+            if (wrap) wrap.style.maxHeight = this.naturalHeight > this.naturalWidth ? '520px' : '340px';
+        };
+    };
+    reader.readAsDataURL(input.files[0]);
+}
+
+// ── Toggle No. Sijil ──────────────────────────────────────────────────────────
 function toggleCertNo(cb) {
     document.getElementById('certNoFields').style.display = cb.checked ? '' : 'none';
 }
 
+// ── Toggle panduan (ikon chevron) ─────────────────────────────────────────────
+document.getElementById('guidePanel')?.addEventListener('show.bs.collapse', () => {
+    document.getElementById('guideChevron').className = 'bi bi-chevron-up small text-muted';
+});
+document.getElementById('guidePanel')?.addEventListener('hide.bs.collapse', () => {
+    document.getElementById('guideChevron').className = 'bi bi-chevron-down small text-muted';
+});
+
+// ── Jana Pratonton ────────────────────────────────────────────────────────────
 function loadPreview() {
     const name = document.getElementById('sampleName').value.trim() || 'NAMA PESERTA CONTOH';
     const img  = document.getElementById('templatePreview');
@@ -255,11 +374,29 @@ function loadPreview() {
     btn.disabled = true;
     btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status"></span> Memuatkan...';
 
-    const form = new FormData();
+    const fd = new FormData();
-    form.append('_token', '{{ csrf_token() }}');
+    fd.append('_token', '{{ csrf_token() }}');
-    form.append('sample_name', name);
+    fd.append('sample_name', name);
 
-    fetch(url, { method: 'POST', body: form })
+    // Hantar nilai form semasa — preview guna koordinat terkini walaupun belum simpan
+    const read = (sel) => document.querySelector(sel)?.value ?? '';
+    fd.append('fields[name][x]',            read('[name="fields[name][x]"]'));
+    fd.append('fields[name][y]',            read('[name="fields[name][y]"]'));
+    fd.append('fields[name][font_size]',    read('[name="fields[name][font_size]"]'));
+    fd.append('fields[name][font_color]',   read('[name="fields[name][font_color]"]'));
+    fd.append('fields[name][ic_font_size]', read('[name="fields[name][ic_font_size]"]'));
+    fd.append('fields[name][align]',        read('[name="fields[name][align]"]'));
+
+    // Sertakan No. Sijil hanya jika toggle aktif
+    if (document.getElementById('showCertNo')?.checked) {
+        fd.append('fields[certificate_no][x]',          read('[name="fields[certificate_no][x]"]'));
+        fd.append('fields[certificate_no][y]',          read('[name="fields[certificate_no][y]"]'));
+        fd.append('fields[certificate_no][font_size]',  read('[name="fields[certificate_no][font_size]"]'));
+        fd.append('fields[certificate_no][font_color]', read('[name="fields[certificate_no][font_color]"]'));
+        fd.append('fields[certificate_no][align]',      read('[name="fields[certificate_no][align]"]'));
+    }
+
+    fetch(url, { method: 'POST', body: fd })
         .then(r => {
             if (!r.ok) return r.json().then(j => { throw new Error(j.error || 'Ralat pelayan (' + r.status + ')'); });
             return r.blob();

resources/views/admin/questionnaires/show.blade.php

@@ -31,13 +31,25 @@
 </div>
 @endsection
 
+@push('styles')
+<style>
+.tajuk-block { border-left: 3px solid #6c757d; }
+.tajuk-header { background: #f8f9fa; }
+.children-list { border-top: 1px solid #dee2e6; }
+.children-list .list-group-item { background: #fff; }
+.children-list .list-group-item:last-child { border-bottom: 0; }
+.drag-handle { cursor: grab; color: #adb5bd; }
+.drag-handle:active { cursor: grabbing; }
+.sortable-ghost { opacity: .4; background: #e9f0ff !important; }
+</style>
+@endpush
+
 @section('content')
 
 <div class="row g-4">
     {{-- Left: Questions --}}
     <div class="col-md-8">
 
-        {{-- Status Banner --}}
         @if($set->status === 'draft')
         <div class="alert alert-warning mb-3 small">
             <i class="bi bi-exclamation-triangle me-2"></i>
@@ -55,61 +67,140 @@
             <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                 <h6 class="mb-0 fw-semibold">
                     <i class="bi bi-list-ul me-2 text-primary"></i>Senarai Soalan
-                    <span class="badge bg-secondary ms-2">{{ $set->questions->count() }}</span>
+                    <span class="badge bg-secondary ms-2">{{ $totalCount }}</span>
                 </h6>
+                <small class="text-muted"><i class="bi bi-grip-vertical me-1"></i>Seret untuk susun semula</small>
             </div>
 
-            @if($set->questions->isEmpty())
+            @if($totalCount === 0)
             <div class="card-body text-center py-5 text-muted">
                 <i class="bi bi-question-circle d-block fs-1 mb-3 opacity-25"></i>
                 Belum ada soalan. Tambah soalan menggunakan borang di sebelah kanan.
             </div>
             @else
             <ul class="list-group list-group-flush" id="questionList">
-                @foreach($set->questions as $q)
+                @foreach($topLevel as $q)
+
+                @if($q->question_type === 'tajuk')
+                {{-- ── TAJUK BLOCK ── --}}
+                <li class="list-group-item p-0 tajuk-block" data-id="{{ $q->id }}">
+                    {{-- Tajuk header row --}}
+                    <div class="tajuk-header d-flex align-items-center gap-2 px-3 py-2">
+                        <i class="bi bi-grip-vertical drag-handle drag-handle-top fs-5"></i>
+                        <span class="badge bg-dark small">Tajuk</span>
+                        <div class="flex-grow-1 fw-semibold">{{ $q->question_text }}</div>
+                        @if($q->rating_labels)
+                        <div class="small text-muted text-nowrap d-none d-md-block">
+                            @php $labels = array_filter($q->rating_labels); @endphp
+                            @if(!empty($labels))
+                                <i class="bi bi-tag me-1"></i>{{ implode(' · ', $labels) }}
+                            @endif
+                        </div>
+                        @endif
+                        <div class="d-flex gap-1 flex-shrink-0">
+                            <button class="btn btn-sm btn-outline-secondary"
+                                    onclick="editQuestion({{ $q->id }}, @json($q->question_text), 'tajuk', false, [], null, @json($q->rating_labels ?? []))">
+                                <i class="bi bi-pencil"></i>
+                            </button>
+                            <form method="POST" action="{{ route('admin.questions.destroy', $q) }}"
+                                  onsubmit="return confirm('Padam bahagian '{{ addslashes($q->question_text) }}' dan semua soalan di dalamnya?')">
+                                @csrf @method('DELETE')
+                                <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
+                            </form>
+                        </div>
+                    </div>
+                    {{-- Rating labels pills --}}
+                    @if($q->rating_labels && array_filter($q->rating_labels))
+                    <div class="px-3 py-1 bg-light border-bottom d-flex gap-2 flex-wrap d-md-none">
+                        @foreach(array_filter($q->rating_labels) as $val => $lbl)
+                        <span class="badge bg-light text-dark border small">{{ $val }}: {{ $lbl }}</span>
+                        @endforeach
+                    </div>
+                    @endif
+                    {{-- Children list --}}
+                    <ul class="children-list list-group list-group-flush" data-parent-id="{{ $q->id }}">
+                        @foreach($q->children as $child)
+                        <li class="list-group-item d-flex align-items-start gap-2 py-2 ps-4" data-id="{{ $child->id }}">
+                            <i class="bi bi-grip-vertical drag-handle drag-handle-child fs-5 mt-1"></i>
+                            <div class="flex-grow-1">
+                                <div class="d-flex align-items-center gap-2 mb-1">
+                                    <span class="badge bg-light text-dark border small">{{ $loop->iteration }}</span>
+                                    <span class="badge bg-primary bg-opacity-10 text-primary small">Rating 1–5</span>
+                                    @if($child->is_required)
+                                    <span class="badge bg-danger bg-opacity-10 text-danger small">Wajib</span>
+                                    @endif
+                                </div>
+                                <div class="small">{{ $child->question_text }}</div>
+                            </div>
+                            <div class="d-flex gap-1 flex-shrink-0">
+                                <button class="btn btn-sm btn-outline-secondary"
+                                        onclick="editQuestion({{ $child->id }}, @json($child->question_text), 'rating', {{ $child->is_required ? 'true' : 'false' }}, [], {{ $child->parent_id ?? 'null' }}, [])">
+                                    <i class="bi bi-pencil"></i>
+                                </button>
+                                <form method="POST" action="{{ route('admin.questions.destroy', $child) }}"
+                                      onsubmit="return confirm('Padam soalan ini?')">
+                                    @csrf @method('DELETE')
+                                    <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
+                                </form>
+                            </div>
+                        </li>
+                        @endforeach
+                        @if($q->children->isEmpty())
+                        <li class="list-group-item text-muted small text-center py-2 fst-italic ps-4">
+                            <i class="bi bi-arrow-down-short me-1"></i>Tiada soalan dalam bahagian ini
+                        </li>
+                        @endif
+                    </ul>
+                </li>
+
+                @else
+                {{-- ── STANDALONE QUESTION ── --}}
                 <li class="list-group-item py-3" data-id="{{ $q->id }}">
                     <div class="d-flex justify-content-between align-items-start gap-2">
-                        <div class="flex-grow-1">
+                        <div class="d-flex align-items-start gap-2 flex-grow-1">
-                            <div class="d-flex align-items-center gap-2 mb-1">
+                            <i class="bi bi-grip-vertical drag-handle drag-handle-top fs-5 mt-1"></i>
-                                <span class="badge bg-light text-dark border small">{{ $loop->iteration }}</span>
+                            <div>
-                                <span class="badge bg-primary bg-opacity-10 text-primary small">
+                                <div class="d-flex align-items-center gap-2 mb-1">
-                                    {{ match($q->question_type) {
+                                    <span class="badge bg-light text-dark border small">{{ $loop->iteration }}</span>
-                                        'rating' => 'Rating',
+                                    <span class="badge bg-primary bg-opacity-10 text-primary small">
-                                        'single_choice' => 'Pilihan Tunggal',
+                                        {{ match($q->question_type) {
-                                        'multiple_choice' => 'Pilihan Berganda',
+                                            'rating'          => 'Rating 1–5',
-                                        'short_text' => 'Teks Pendek',
+                                            'single_choice'   => 'Pilihan Tunggal',
-                                        'long_text' => 'Teks Panjang',
+                                            'multiple_choice' => 'Pilihan Berganda',
-                                        default => $q->question_type,
+                                            'short_text'      => 'Teks Pendek',
-                                    } }}
+                                            'long_text'       => 'Teks Panjang',
-                                </span>
+                                            default           => $q->question_type,
-                                @if($q->is_required)
+                                        } }}
-                                <span class="badge bg-danger bg-opacity-10 text-danger small">Wajib</span>
+                                    </span>
+                                    @if($q->is_required)
+                                    <span class="badge bg-danger bg-opacity-10 text-danger small">Wajib</span>
+                                    @endif
+                                </div>
+                                <div class="fw-medium">{{ $q->question_text }}</div>
+                                @if($q->options_json)
+                                <div class="mt-1">
+                                    @foreach($q->options_json as $opt)
+                                    <span class="badge bg-light text-dark border me-1 small">{{ $opt }}</span>
+                                    @endforeach
+                                </div>
                                 @endif
                             </div>
-                            <div class="fw-medium">{{ $q->question_text }}</div>
-                            @if($q->options_json)
-                            <div class="mt-1">
-                                @foreach($q->options_json as $opt)
-                                <span class="badge bg-light text-dark border me-1 small">{{ $opt }}</span>
-                                @endforeach
-                            </div>
-                            @endif
                         </div>
                         <div class="d-flex gap-1 flex-shrink-0">
                             <button class="btn btn-sm btn-outline-secondary"
-                                    onclick="editQuestion({{ $q->id }}, @json($q->question_text), '{{ $q->question_type }}', {{ $q->is_required ? 'true' : 'false' }}, @json($q->options_json ?? []))">
+                                    onclick="editQuestion({{ $q->id }}, @json($q->question_text), '{{ $q->question_type }}', {{ $q->is_required ? 'true' : 'false' }}, @json($q->options_json ?? []), null, [])">
                                 <i class="bi bi-pencil"></i>
                             </button>
                             <form method="POST" action="{{ route('admin.questions.destroy', $q) }}"
                                   onsubmit="return confirm('Padam soalan ini?')">
                                 @csrf @method('DELETE')
-                                <button class="btn btn-sm btn-outline-danger">
+                                <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
-                                    <i class="bi bi-trash"></i>
-                                </button>
                             </form>
                         </div>
                     </div>
                 </li>
+                @endif
+
                 @endforeach
             </ul>
             @endif
@@ -143,27 +234,31 @@
     <div class="col-md-4">
         <div class="card border-0 shadow-sm sticky-top" style="top:80px;">
             <div class="card-header bg-white py-3">
-                <h6 class="mb-0 fw-semibold" id="formTitle"><i class="bi bi-plus-circle me-2 text-primary"></i>Tambah Soalan</h6>
+                <h6 class="mb-0 fw-semibold" id="formTitle">
+                    <i class="bi bi-plus-circle me-2 text-primary"></i>Tambah Soalan
+                </h6>
             </div>
             <div class="card-body">
 
-                {{-- Add Question Form --}}
                 <form method="POST" id="questionForm" action="{{ route('admin.questions.store', $set) }}">
                     @csrf
                     <input type="hidden" name="_method" id="formMethod" value="POST">
                     <input type="hidden" name="_question_id" id="questionId" value="">
 
+                    {{-- Question text --}}
                     <div class="mb-3">
-                        <label class="form-label small fw-medium">Soalan <span class="text-danger">*</span></label>
+                        <label class="form-label small fw-medium">Teks Soalan / Tajuk <span class="text-danger">*</span></label>
                         <textarea name="question_text" id="questionText" rows="3"
                                   class="form-control form-control-sm @error('question_text') is-invalid @enderror"
-                                  placeholder="Taip soalan di sini..."></textarea>
+                                  placeholder="Taip soalan atau nama bahagian..."></textarea>
                         @error('question_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
                     </div>
 
+                    {{-- Question type --}}
                     <div class="mb-3">
-                        <label class="form-label small fw-medium">Jenis Soalan <span class="text-danger">*</span></label>
+                        <label class="form-label small fw-medium">Jenis <span class="text-danger">*</span></label>
-                        <select name="question_type" id="questionType" class="form-select form-select-sm" onchange="toggleOptions()">
+                        <select name="question_type" id="questionType" class="form-select form-select-sm" onchange="onTypeChange()">
+                            <option value="tajuk">Tajuk Bahagian</option>
                             <option value="rating">Rating (1–5)</option>
                             <option value="single_choice">Pilihan Tunggal</option>
                             <option value="multiple_choice">Pilihan Berganda</option>
@@ -172,11 +267,41 @@
                         </select>
                     </div>
 
-                    <div class="mb-3 form-check">
+                    {{-- Required (hidden for tajuk) --}}
-                        <input type="checkbox" name="is_required" id="isRequired" class="form-check-input" value="1" checked>
+                    <div class="mb-3 form-check d-none" id="requiredSection">
+                        <input type="checkbox" name="is_required" id="isRequired"
+                               class="form-check-input" value="1" checked>
                         <label class="form-check-label small" for="isRequired">Wajib dijawab</label>
                     </div>
 
+                    {{-- Parent selector (rating only) --}}
+                    <div id="parentSection" class="mb-3 d-none">
+                        <label class="form-label small fw-medium">Bahagian (Tajuk) <span class="text-danger">*</span></label>
+                        <select name="parent_id" id="parentId" class="form-select form-select-sm">
+                            <option value="">— Pilih Tajuk —</option>
+                        </select>
+                        @error('parent_id')
+                        <div class="text-danger small mt-1">{{ $message }}</div>
+                        @enderror
+                    </div>
+
+                    {{-- Rating labels (tajuk only) --}}
+                    <div id="ratingLabelsSection" class="mb-3">
+                        <label class="form-label small fw-medium">Label Skala Rating</label>
+                        <div class="d-flex flex-column gap-1">
+                            @for ($i = 1; $i <= 5; $i++)
+                            <div class="input-group input-group-sm">
+                                <span class="input-group-text fw-bold" style="width:32px;justify-content:center;">{{ $i }}</span>
+                                <input type="text" name="rating_labels[{{ $i }}]" id="ratingLabel{{ $i }}"
+                                       class="form-control"
+                                       placeholder="{{ $i === 1 ? 'cth: Sangat Tidak Setuju' : ($i === 5 ? 'cth: Sangat Setuju' : '') }}">
+                            </div>
+                            @endfor
+                        </div>
+                        <div class="form-text">Kosongkan jika tiada label untuk nilai tersebut.</div>
+                    </div>
+
+                    {{-- Options (choice types) --}}
                     <div id="optionsSection" class="mb-3 d-none">
                         <label class="form-label small fw-medium">Pilihan Jawapan</label>
                         <div id="optionsList">
@@ -192,13 +317,17 @@
                         <button type="button" class="btn btn-sm btn-outline-secondary w-100" onclick="addOption()">
                             <i class="bi bi-plus me-1"></i> Tambah Pilihan
                         </button>
+                        @error('options')
+                        <div class="text-danger small mt-1">{{ $message }}</div>
+                        @enderror
                     </div>
 
                     <div class="d-flex gap-2">
                         <button type="submit" class="btn btn-primary btn-sm w-100">
                             <i class="bi bi-check-lg me-1"></i> <span id="submitLabel">Tambah</span>
                         </button>
-                        <button type="button" class="btn btn-outline-secondary btn-sm" id="cancelEdit" style="display:none;" onclick="resetForm()">
+                        <button type="button" class="btn btn-outline-secondary btn-sm" id="cancelEdit"
+                                style="display:none;" onclick="resetForm()">
                             Batal
                         </button>
                     </div>
@@ -212,21 +341,49 @@
 @endsection
 
 @push('scripts')
+<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.3/Sortable.min.js"></script>
 <script>
-const setId = {{ $set->id }};
+const setId      = {{ $set->id }};
-const storeUrl = "{{ route('admin.questions.store', $set) }}";
+const storeUrl   = "{{ route('admin.questions.store', $set) }}";
 const updateBase = "{{ url('admin/questions') }}/";
+const reorderUrl = "{{ route('admin.questions.reorder') }}";
+const csrfToken  = document.querySelector('meta[name="csrf-token"]').content;
 
-function toggleOptions() {
+// Tajuk questions available as parents for rating questions
-    const type = document.getElementById('questionType').value;
+const tajukList  = @json($topLevel->where('question_type', 'tajuk')->map(fn($q) => ['id' => $q->id, 'text' => $q->question_text])->values());
-    const section = document.getElementById('optionsSection');
+
-    section.classList.toggle('d-none', !['single_choice','multiple_choice'].includes(type));
+// ── UI helpers ──────────────────────────────────────────────────────────────
+
+function populateParentDropdown(selectedId) {
+    const sel = document.getElementById('parentId');
+    sel.innerHTML = '<option value="">— Pilih Tajuk —</option>';
+    tajukList.forEach(function(t) {
+        const opt = document.createElement('option');
+        opt.value = t.id;
+        opt.textContent = t.text;
+        if (selectedId && t.id == selectedId) opt.selected = true;
+        sel.appendChild(opt);
+    });
+}
+
+function onTypeChange() {
+    const type    = document.getElementById('questionType').value;
+    const isTajuk = type === 'tajuk';
+    const isRating = type === 'rating';
+    const isChoice = ['single_choice', 'multiple_choice'].includes(type);
+
+    document.getElementById('requiredSection').classList.toggle('d-none', isTajuk);
+    document.getElementById('ratingLabelsSection').classList.toggle('d-none', !isTajuk);
+    document.getElementById('parentSection').classList.toggle('d-none', !isRating);
+    document.getElementById('optionsSection').classList.toggle('d-none', !isChoice);
+
+    if (isRating) populateParentDropdown(null);
 }
 
 function addOption() {
-    const list = document.getElementById('optionsList');
+    const list  = document.getElementById('optionsList');
     const count = list.querySelectorAll('input').length + 1;
-    const div = document.createElement('div');
+    const div   = document.createElement('div');
     div.className = 'input-group input-group-sm mb-2';
     div.innerHTML = `<input type="text" name="options[]" class="form-control" placeholder="Pilihan ${count}">
                      <button type="button" class="btn btn-outline-danger" onclick="removeOption(this)"><i class="bi bi-x"></i></button>`;
@@ -240,7 +397,7 @@ function removeOption(btn) {
     }
 }
 
-function editQuestion(id, text, type, required, options) {
+function editQuestion(id, text, type, required, options, parentId, ratingLabels) {
     document.getElementById('formTitle').innerHTML = '<i class="bi bi-pencil me-2 text-warning"></i>Edit Soalan';
     document.getElementById('submitLabel').textContent = 'Kemaskini';
     document.getElementById('cancelEdit').style.display = '';
@@ -253,18 +410,42 @@ function editQuestion(id, text, type, required, options) {
     form.action = updateBase + id;
     document.getElementById('formMethod').value = 'PUT';
 
-    toggleOptions();
+    onTypeChange(); // show/hide sections
 
+    // Set parent if rating
+    if (type === 'rating' && parentId) {
+        populateParentDropdown(parentId);
+    }
+
+    // Set rating labels if tajuk
+    if (type === 'tajuk') {
+        for (let i = 1; i <= 5; i++) {
+            const el = document.getElementById('ratingLabel' + i);
+            if (el) el.value = (ratingLabels && (ratingLabels[i] || ratingLabels[String(i)])) || '';
+        }
+    }
+
+    // Options list
     const list = document.getElementById('optionsList');
     list.innerHTML = '';
     if (options && options.length) {
-        options.forEach((opt, i) => {
+        options.forEach(function(opt, i) {
             const div = document.createElement('div');
             div.className = 'input-group input-group-sm mb-2';
             div.innerHTML = `<input type="text" name="options[]" class="form-control" value="${opt}" placeholder="Pilihan ${i+1}">
                              <button type="button" class="btn btn-outline-danger" onclick="removeOption(this)"><i class="bi bi-x"></i></button>`;
             list.appendChild(div);
         });
+    } else {
+        // Restore default empty options for choice types
+        list.innerHTML = `<div class="input-group input-group-sm mb-2">
+            <input type="text" name="options[]" class="form-control" placeholder="Pilihan 1">
+            <button type="button" class="btn btn-outline-danger" onclick="removeOption(this)"><i class="bi bi-x"></i></button>
+        </div>
+        <div class="input-group input-group-sm mb-2">
+            <input type="text" name="options[]" class="form-control" placeholder="Pilihan 2">
+            <button type="button" class="btn btn-outline-danger" onclick="removeOption(this)"><i class="bi bi-x"></i></button>
+        </div>`;
     }
 
     form.scrollIntoView({ behavior: 'smooth' });
@@ -278,17 +459,65 @@ function resetForm() {
     document.getElementById('questionForm').action = storeUrl;
     document.getElementById('formMethod').value = 'POST';
     document.getElementById('questionId').value = '';
-    document.getElementById('optionsSection').classList.add('d-none');
+    // Clear rating labels
-
+    for (let i = 1; i <= 5; i++) {
-    const list = document.getElementById('optionsList');
+        const el = document.getElementById('ratingLabel' + i);
-    list.innerHTML = `<div class="input-group input-group-sm mb-2">
+        if (el) el.value = '';
-        <input type="text" name="options[]" class="form-control" placeholder="Pilihan 1">
+    }
-        <button type="button" class="btn btn-outline-danger" onclick="removeOption(this)"><i class="bi bi-x"></i></button>
+    document.getElementById('parentId').value = '';
-    </div>
+    onTypeChange();
-    <div class="input-group input-group-sm mb-2">
+    document.getElementById('optionsList').innerHTML = `
-        <input type="text" name="options[]" class="form-control" placeholder="Pilihan 2">
+        <div class="input-group input-group-sm mb-2">
-        <button type="button" class="btn btn-outline-danger" onclick="removeOption(this)"><i class="bi bi-x"></i></button>
+            <input type="text" name="options[]" class="form-control" placeholder="Pilihan 1">
-    </div>`;
+            <button type="button" class="btn btn-outline-danger" onclick="removeOption(this)"><i class="bi bi-x"></i></button>
+        </div>
+        <div class="input-group input-group-sm mb-2">
+            <input type="text" name="options[]" class="form-control" placeholder="Pilihan 2">
+            <button type="button" class="btn btn-outline-danger" onclick="removeOption(this)"><i class="bi bi-x"></i></button>
+        </div>`;
 }
+
+// ── Drag & Drop ──────────────────────────────────────────────────────────────
+
+function sendReorder(order, parentId) {
+    fetch(reorderUrl, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
+        body: JSON.stringify({ order: order, parent_id: parentId }),
+    });
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Init: show sections for default type (tajuk)
+    onTypeChange();
+
+    // Top-level sortable — sorts tajuk blocks + standalone questions
+    const topList = document.getElementById('questionList');
+    if (topList) {
+        Sortable.create(topList, {
+            animation:   150,
+            handle:      '.drag-handle-top',
+            ghostClass:  'sortable-ghost',
+            onEnd: function() {
+                const order = [...topList.querySelectorAll(':scope > [data-id]')].map(el => +el.dataset.id);
+                sendReorder(order, null);
+            },
+        });
+    }
+
+    // Per-tajuk sortable — sorts rating children within a group
+    document.querySelectorAll('.children-list').forEach(function(list) {
+        Sortable.create(list, {
+            animation:   150,
+            handle:      '.drag-handle-child',
+            ghostClass:  'sortable-ghost',
+            onEnd: function() {
+                const parentId = +list.dataset.parentId;
+                const order    = [...list.querySelectorAll(':scope > [data-id]')].map(el => +el.dataset.id);
+                sendReorder(order, parentId);
+            },
+        });
+    });
+});
 </script>
 @endpush

resources/views/auth/forgot-password.blade.php

@@ -1,25 +1,67 @@
-<x-guest-layout>
+<!DOCTYPE html>
-    <div class="mb-4 text-sm text-gray-600">
+<html lang="ms">
-        {{ __('Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }}
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Terlupa Kata Laluan — eCert MBIP</title>
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <style>
+        body { background: linear-gradient(135deg, #1a56a0 0%, #2563eb 100%); min-height: 100vh; }
+        .card { border-radius: 1rem; border: none; box-shadow: 0 8px 32px rgba(0,0,0,0.2); max-width: 420px; }
+    </style>
+</head>
+<body class="d-flex align-items-center justify-content-center py-5">
+    <div class="w-100 px-3">
+        <div class="text-center mb-4">
+            <i class="bi bi-award-fill text-white" style="font-size: 3rem;"></i>
+            <h4 class="text-white fw-bold mt-2 mb-0">eCert MBIP</h4>
+            <small class="text-white opacity-75">Sistem Pengurusan Sijil Digital</small>
+        </div>
+
+        <div class="card mx-auto">
+            <div class="card-body p-4">
+                <h5 class="card-title fw-semibold mb-1">Terlupa Kata Laluan?</h5>
+                <p class="text-muted small mb-4">
+                    Masukkan alamat emel anda dan kami akan hantar pautan untuk menetapkan semula kata laluan.
+                </p>
+
+                @if(session('status'))
+                <div class="alert alert-success small">
+                    <i class="bi bi-check-circle me-1"></i>{{ session('status') }}
+                </div>
+                @endif
+
+                <form method="POST" action="{{ route('password.email') }}">
+                    @csrf
+                    <div class="mb-3">
+                        <label for="email" class="form-label fw-medium">Alamat Emel</label>
+                        <input id="email" type="email" name="email"
+                               value="{{ old('email') }}" required autofocus autocomplete="email"
+                               class="form-control @error('email') is-invalid @enderror"
+                               placeholder="admin@mbip.gov.my">
+                        @error('email')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                        @enderror
+                    </div>
+
+                    <button type="submit" class="btn w-100 text-white fw-semibold mb-3"
+                            style="background: var(--mbip-primary, #1a56a0);">
+                        <i class="bi bi-send me-1"></i> Hantar Pautan Reset
+                    </button>
+
+                    <div class="text-center">
+                        <a href="{{ route('login') }}" class="small text-decoration-none text-muted">
+                            <i class="bi bi-arrow-left me-1"></i> Kembali ke Log Masuk
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <div class="text-center mt-3">
+            <small class="text-white opacity-60">Majlis Bandaraya Ipoh Perak &copy; {{ date('Y') }}</small>
+        </div>
     </div>
-
+</body>
-    <!-- Session Status -->
+</html>
-    <x-auth-session-status class="mb-4" :status="session('status')" />
-
-    <form method="POST" action="{{ route('password.email') }}">
-        @csrf
-
-        <!-- Email Address -->
-        <div>
-            <x-input-label for="email" :value="__('Email')" />
-            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
-            <x-input-error :messages="$errors->get('email')" class="mt-2" />
-        </div>
-
-        <div class="flex items-center justify-end mt-4">
-            <x-primary-button>
-                {{ __('Email Password Reset Link') }}
-            </x-primary-button>
-        </div>
-    </form>
-</x-guest-layout>

resources/views/auth/reset-password.blade.php

@@ -1,39 +1,83 @@
-<x-guest-layout>
+<!DOCTYPE html>
-    <form method="POST" action="{{ route('password.store') }}">
+<html lang="ms">
-        @csrf
+<head>
-
+    <meta charset="UTF-8">
-        <!-- Password Reset Token -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <input type="hidden" name="token" value="{{ $request->route('token') }}">
+    <title>Tetapkan Semula Kata Laluan — eCert MBIP</title>
-
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
-        <!-- Email Address -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
-        <div>
+    <style>
-            <x-input-label for="email" :value="__('Email')" />
+        body { background: linear-gradient(135deg, #1a56a0 0%, #2563eb 100%); min-height: 100vh; }
-            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email', $request->email)" required autofocus autocomplete="username" />
+        .card { border-radius: 1rem; border: none; box-shadow: 0 8px 32px rgba(0,0,0,0.2); max-width: 420px; }
-            <x-input-error :messages="$errors->get('email')" class="mt-2" />
+    </style>
+</head>
+<body class="d-flex align-items-center justify-content-center py-5">
+    <div class="w-100 px-3">
+        <div class="text-center mb-4">
+            <i class="bi bi-award-fill text-white" style="font-size: 3rem;"></i>
+            <h4 class="text-white fw-bold mt-2 mb-0">eCert MBIP</h4>
+            <small class="text-white opacity-75">Sistem Pengurusan Sijil Digital</small>
         </div>
 
-        <!-- Password -->
+        <div class="card mx-auto">
-        <div class="mt-4">
+            <div class="card-body p-4">
-            <x-input-label for="password" :value="__('Password')" />
+                <h5 class="card-title fw-semibold mb-1">Tetapkan Semula Kata Laluan</h5>
-            <x-text-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" />
+                <p class="text-muted small mb-4">Masukkan kata laluan baru untuk akaun anda.</p>
-            <x-input-error :messages="$errors->get('password')" class="mt-2" />
+
+                <form method="POST" action="{{ route('password.store') }}">
+                    @csrf
+                    <input type="hidden" name="token" value="{{ $request->route('token') }}">
+
+                    <div class="mb-3">
+                        <label for="email" class="form-label fw-medium">Alamat Emel</label>
+                        <input id="email" type="email" name="email"
+                               value="{{ old('email', $request->email) }}" required autofocus autocomplete="username"
+                               class="form-control @error('email') is-invalid @enderror"
+                               placeholder="admin@mbip.gov.my">
+                        @error('email')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                        @enderror
+                    </div>
+
+                    <div class="mb-3">
+                        <label for="password" class="form-label fw-medium">Kata Laluan Baru</label>
+                        <input id="password" type="password" name="password"
+                               required autocomplete="new-password"
+                               class="form-control @error('password') is-invalid @enderror"
+                               placeholder="Min. 8 aksara">
+                        @error('password')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                        @enderror
+                    </div>
+
+                    <div class="mb-4">
+                        <label for="password_confirmation" class="form-label fw-medium">Sahkan Kata Laluan Baru</label>
+                        <input id="password_confirmation" type="password" name="password_confirmation"
+                               required autocomplete="new-password"
+                               class="form-control @error('password_confirmation') is-invalid @enderror"
+                               placeholder="••••••••">
+                        @error('password_confirmation')
+                        <div class="invalid-feedback">{{ $message }}</div>
+                        @enderror
+                    </div>
+
+                    <button type="submit" class="btn w-100 text-white fw-semibold mb-3"
+                            style="background: var(--mbip-primary, #1a56a0);">
+                        <i class="bi bi-key me-1"></i> Tetapkan Semula Kata Laluan
+                    </button>
+
+                    <div class="text-center">
+                        <a href="{{ route('login') }}" class="small text-decoration-none text-muted">
+                            <i class="bi bi-arrow-left me-1"></i> Kembali ke Log Masuk
+                        </a>
+                    </div>
+                </form>
+            </div>
         </div>
 
-        <!-- Confirm Password -->
+        <div class="text-center mt-3">
-        <div class="mt-4">
+            <small class="text-white opacity-60">Majlis Bandaraya Ipoh Perak &copy; {{ date('Y') }}</small>
-            <x-input-label for="password_confirmation" :value="__('Confirm Password')" />
-
-            <x-text-input id="password_confirmation" class="block mt-1 w-full"
-                                type="password"
-                                name="password_confirmation" required autocomplete="new-password" />
-
-            <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
         </div>
-
+    </div>
-        <div class="flex items-center justify-end mt-4">
+</body>
-            <x-primary-button>
+</html>
-                {{ __('Reset Password') }}
-            </x-primary-button>
-        </div>
-    </form>
-</x-guest-layout>

resources/views/layouts/admin.blade.php

@@ -66,6 +66,12 @@
                 <span class="badge {{ auth()->user()->isSuperAdmin() ? 'bg-danger' : 'bg-primary' }} mb-2 d-inline-block">
                     {{ auth()->user()->isSuperAdmin() ? 'Super Admin' : 'Admin Program' }}
                 </span>
+                <div class="d-flex gap-2 mb-2">
+                    <a href="{{ route('admin.profile.show') }}"
+                       class="btn btn-sm btn-outline-light flex-grow-1 {{ request()->routeIs('admin.profile.*') ? 'active' : '' }}">
+                        <i class="bi bi-person-gear me-1"></i> Profil
+                    </a>
+                </div>
                 <form method="POST" action="{{ route('logout') }}">
                     @csrf
                     <button type="submit" class="btn btn-sm btn-outline-light w-100">

resources/views/public/questionnaire/show.blade.php

@@ -26,13 +26,54 @@
     <form method="POST" action="{{ route('public.questionnaire.submit', [$qrCode->token, $participant->uuid]) }}">
         @csrf
 
+        @php $qNum = 0; @endphp
+
         @foreach($questions as $q)
+
+        @if($q->question_type === 'tajuk')
+        {{-- ── Section header ─────────────────────────────── --}}
+        <div class="d-flex align-items-center gap-2 mt-4 mb-3 pb-1 border-bottom">
+            <span class="fw-bold text-primary">{{ $q->question_text }}</span>
+        </div>
+
+        @foreach($q->children as $child)
+        @php $qNum++ @endphp
         <div class="mb-4">
             <label class="form-label fw-medium">
-                {{ $loop->iteration }}. {{ $q->question_text }}
+                {{ $qNum }}. {{ $child->question_text }}
-                @if($q->is_required)
+                @if($child->is_required)<span class="text-danger">*</span>@endif
-                <span class="text-danger">*</span>
+            </label>
-                @endif
+
+            @error('q_' . $child->id)
+            <div class="text-danger small mb-1"><i class="bi bi-exclamation-circle me-1"></i>{{ $message }}</div>
+            @enderror
+
+            <div class="d-flex gap-3 flex-wrap">
+                @for($i = 1; $i <= 5; $i++)
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio"
+                           name="q_{{ $child->id }}" id="q{{ $child->id }}_{{ $i }}"
+                           value="{{ $i }}" {{ old('q_'.$child->id) == $i ? 'checked' : '' }}>
+                    <label class="form-check-label" for="q{{ $child->id }}_{{ $i }}">
+                        {{ $i }}
+                        @php $label = $q->rating_labels[$i] ?? $q->rating_labels[strval($i)] ?? ''; @endphp
+                        @if($label)
+                        <small class="text-muted d-block" style="font-size:.7rem;">({{ $label }})</small>
+                        @endif
+                    </label>
+                </div>
+                @endfor
+            </div>
+        </div>
+        @endforeach
+
+        @else
+        {{-- ── Standalone question ─────────────────────────── --}}
+        @php $qNum++ @endphp
+        <div class="mb-4">
+            <label class="form-label fw-medium">
+                {{ $qNum }}. {{ $q->question_text }}
+                @if($q->is_required)<span class="text-danger">*</span>@endif
             </label>
 
             @error('q_' . $q->id)
@@ -40,7 +81,7 @@
             @enderror
 
             @if($q->question_type === 'rating')
-            <div class="d-flex gap-2 flex-wrap">
+            <div class="d-flex gap-3 flex-wrap">
                 @for($i = 1; $i <= 5; $i++)
                 <div class="form-check form-check-inline">
                     <input class="form-check-input" type="radio"
@@ -48,8 +89,8 @@
                            value="{{ $i }}" {{ old('q_'.$q->id) == $i ? 'checked' : '' }}>
                     <label class="form-check-label" for="q{{ $q->id }}_{{ $i }}">
                         {{ $i }}
-                        @if($i === 1) <small class="text-muted">(Sangat Tidak Setuju)</small>
+                        @if($i === 1)<small class="text-muted">(Sangat Tidak Setuju)</small>
-                        @elseif($i === 5) <small class="text-muted">(Sangat Setuju)</small>
+                        @elseif($i === 5)<small class="text-muted">(Sangat Setuju)</small>
                         @endif
                     </label>
                 </div>
@@ -80,8 +121,7 @@
             @elseif($q->question_type === 'short_text')
             <input type="text" name="q_{{ $q->id }}"
                    class="form-control @error('q_'.$q->id) is-invalid @enderror"
-                   value="{{ old('q_'.$q->id) }}"
+                   value="{{ old('q_'.$q->id) }}" placeholder="Jawapan anda...">
-                   placeholder="Jawapan anda...">
 
             @elseif($q->question_type === 'long_text')
             <textarea name="q_{{ $q->id }}" rows="4"
@@ -89,6 +129,8 @@
                       placeholder="Jawapan anda...">{{ old('q_'.$q->id) }}</textarea>
             @endif
         </div>
+        @endif
+
         @endforeach
 
         <button type="submit" class="btn btn-primary w-100 btn-checkin">

routes/web.php

@@ -12,6 +12,7 @@ use App\Http\Controllers\Admin\StatisticsController;
 use App\Http\Controllers\Admin\QuestionnaireSetController;
 use App\Http\Controllers\Admin\QuestionController;
 use App\Http\Controllers\Admin\CertificateController as AdminCertificateController;
+use App\Http\Controllers\Admin\ProfileController;
 use App\Http\Controllers\Public\CheckinController;
 use App\Http\Controllers\Public\QuestionnaireController;
 use App\Http\Controllers\Public\AttendanceCheckController;
@@ -29,6 +30,11 @@ Route::middleware(['auth', 'admin'])->prefix('admin')->name('admin.')->group(fun
 
     Route::get('/dashboard', [DashboardController::class, 'index'])->name('dashboard');
 
+    // Profile
+    Route::get('/profile',           [ProfileController::class, 'show'])->name('profile.show');
+    Route::put('/profile/email',     [ProfileController::class, 'updateEmail'])->name('profile.update-email');
+    Route::put('/profile/password',  [ProfileController::class, 'updatePassword'])->name('profile.update-password');
+
     // Programs
     Route::resource('programs', ProgramController::class)->parameters(['programs' => 'program:uuid']);
     Route::post('/programs/{program:uuid}/publish',  [ProgramController::class, 'publish'])->name('programs.publish');
@@ -66,6 +72,7 @@ Route::middleware(['auth', 'admin'])->prefix('admin')->name('admin.')->group(fun
     // Program Questionnaire
     Route::prefix('programs/{program:uuid}/questionnaire')->name('programs.questionnaire.')->group(function () {
         Route::get('/',          [ProgramQuestionnaireController::class, 'show'])->name('show');
+        Route::get('/preview',   [ProgramQuestionnaireController::class, 'preview'])->name('preview');
         Route::post('/attach',   [ProgramQuestionnaireController::class, 'attach'])->name('attach');
         Route::post('/confirm',  [ProgramQuestionnaireController::class, 'confirm'])->name('confirm');
         Route::delete('/detach', [ProgramQuestionnaireController::class, 'detach'])->name('detach');