@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">
                <a href="{{ route('soal.index', ['start' => 1, 'soal_id' => $soal->id]) }}" class="btn {{ $sudahDikerjakan ? 'text-success fw-semibold'  : 'btn-primary btn-sm btn-start'}} ">
                 {{ $sudahDikerjakan ? 'Terisi' : 'Mulai Isi' }}
                </a>
            </div>
          </div>
        </div>
      </div>
    @endforeach
  </div>
</div>
@endsection