mutu-rsab/resources/views/soal/list.blade.php

72 lines
2.4 KiB
PHP

@extends('layouts.template')
@section('title', 'Daftar Kuesioner')
@section('custom_css')
<style>
.soal-card {
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.2s ease;
height: 100%;
}
.soal-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.btn-start {
border-radius: 999px;
padding-inline: 1.5rem;
}
</style>
@endsection
@section('content')
<div class="py-5">
<div class="text-center mb-5">
<h2 class="fw-bold mb-2">Selamat Datang di Survei Mutu</h2>
<p class="text-muted mb-0">Silakan pilih kuesioner yang ingin Anda isi. Pastikan data yang diberikan sesuai kondisi unit kerja Anda.</p>
</div>
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{ session('success') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
@php
$completedSoalIds = $completedSoalIds ?? [];
@endphp
<div class="row g-4">
@foreach ($daftarSoal as $soal)
@php
$sudahDikerjakan = in_array($soal->id, $completedSoalIds);
@endphp
<div class="col-lg-4 col-md-6">
<div class="card soal-card h-100 shadow-sm">
<div class="card-body d-flex flex-column">
<div class="d-flex justify-content-between align-items-start mb-3">
<span class="badge {{ $sudahDikerjakan ? 'bg-success' : 'bg-label-primary' }}">
{{ $sudahDikerjakan ? 'Sudah Dikerjakan' : 'Kuesioner' }}
</span>
</div>
<h5 class="fw-semibold mb-2">{{ $soal->judul_soal ?? 'Tanpa Judul' }}</h5>
<p class="text-muted flex-grow-1">{{ \Illuminate\Support\Str::limit(strip_tags($soal->keterangan_soal ?? 'Belum ada keterangan'), 120) }}</p>
<div class="mt-3 d-flex justify-content-between align-items-center">
@if ($sudahDikerjakan)
<span class="text-success fw-semibold">Terisi</span>
@else
<a href="{{ route('soal.index', ['start' => 1, 'soal_id' => $soal->id]) }}" class="btn btn-primary btn-sm btn-start">
Mulai Isi
</a>
@endif
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
@endsection