@extends('layouts.pelanggan')

@section('title', 'Kuesioner')

@section('content')
<div class="min-h-screen bg-slate-50 pb-24">
    <div class="max-w-[480px] mx-auto">

        {{-- Header --}}
        <div class="bg-white border-b border-slate-200 px-5 py-4 sticky top-0 z-10">
            <div class="flex items-center gap-3">
                <a href="{{ route('beranda') }}" class="text-slate-600 hover:text-blue-600">
                    ←
                </a>

                <div>
                    <h1 class="text-lg font-bold text-slate-900">
                        Kuesioner Kepuasan
                    </h1>

                    <p class="text-xs text-slate-500">
                        Bantu kami meningkatkan kualitas layanan.
                    </p>
                </div>
            </div>
        </div>

        <form action="{{ route('p.kuesioner.store') }}" method="POST">

            @csrf

            {{-- Card Petunjuk --}}
            <div class="bg-white rounded-2xl shadow-sm p-5 m-5">

                <h2 class="font-bold text-slate-800 mb-2">
                    Petunjuk Pengisian
                </h2>

                <p class="text-sm text-slate-500 leading-6">
                    Berikan penilaian terhadap aplikasi
                    <strong>PT. Bilah Pane Putra</strong>
                    dengan memilih angka
                    <strong>1 sampai 5</strong>.
                </p>

                <div class="mt-4 space-y-2 text-sm">

                    <div>1 = Sangat Tidak Setuju</div>

                    <div>2 = Tidak Setuju</div>

                    <div>3 = Netral</div>

                    <div>4 = Setuju</div>

                    <div>5 = Sangat Setuju</div>

                </div>

            </div>

            @foreach($pertanyaans as $pertanyaan)

                <div class="bg-white rounded-2xl shadow-sm p-5 mx-5 mb-4">

                    <div class="flex justify-between items-center mb-3">

                        <span class="text-xs font-bold text-blue-600 uppercase">
                            {{ $pertanyaan->aspek }}
                        </span>

                        <span class="text-xs text-slate-400">
                            No {{ $pertanyaan->urutan }}
                        </span>

                    </div>

                    <p class="font-medium text-slate-800 leading-6 mb-5">
                        {{ $pertanyaan->pertanyaan }}
                    </p>

                    <div class="grid grid-cols-5 gap-2">

                        @for($i=1;$i<=5;$i++)

                            <label class="cursor-pointer">

                                <input
                                    type="radio"
                                    name="jawaban[{{ $pertanyaan->id }}]"
                                    value="{{ $i }}"
                                    required
                                    class="peer hidden">

                                <div
                                    class="border rounded-xl py-3 text-center
                                           peer-checked:bg-blue-600
                                           peer-checked:text-white
                                           peer-checked:border-blue-600
                                           hover:border-blue-400
                                           transition">

                                    {{ $i }}

                                </div>

                            </label>

                        @endfor

                    </div>

                </div>

            @endforeach

            <div class="px-5 mb-10">

                <button
                    class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-2xl">

                    Kirim Kuesioner

                </button>

            </div>

        </form>

    </div>
</div>
@endsection