@extends('layouts.app')

@section('title', 'Hasil Form Kehadiran')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb">
                <a href="{{ route('fk.kegiatan-form.show', $form->id) }}" class="hover:text-blue-700"><span>{{ $form->judul }}</span></a>
                <i class="bi bi-chevron-right" aria-hidden="true"></i>Hasil
            </p>
            <h1 class="pkbm-dashboard__title">Hasil Form Kehadiran</h1>
            <p class="pkbm-dashboard__subtitle">{{ number_format($rows->count(), 0, ',', '.') }} isian tercatat.</p>
        </div>
        <div class="flex shrink-0 flex-wrap gap-2">
            <a href="{{ route('fk.kegiatan-form.isi', $form->id) }}" class="sp-btn-secondary"><i class="bi bi-pencil-square" aria-hidden="true"></i>Tambah Isian</a>
            <a href="{{ route('fk.kegiatan-form.print', $form->id) }}" class="sp-btn-primary" target="_blank" rel="noopener"><i class="bi bi-printer" aria-hidden="true"></i>Cetak</a>
        </div>
    </header>

    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span></div>
    @endif

    <section class="sp-card overflow-hidden">
        <div class="sp-card-header flex flex-wrap items-center justify-between gap-3">
            <div>
                <h2 class="sp-section-title">Rekap Isian Kehadiran</h2>
                <p class="mt-1 text-xs text-slate-500">Setiap baris adalah satu responden yang mengisi form ini.</p>
            </div>
            <span class="inline-flex rounded-full bg-sky-50 px-3 py-1 text-xs font-semibold text-sky-700">{{ $rows->count() }} Isian</span>
        </div>
        <div class="overflow-x-auto">
            <table class="sp-table min-w-full">
                <thead>
                    <tr>
                        <th scope="col" class="w-12">No</th>
                        @foreach ($questions as $question)
                            <th scope="col" class="whitespace-nowrap">{{ $question->pertanyaan }}</th>
                        @endforeach
                        <th scope="col" class="w-16 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($rows as $row)
                        <tr>
                            <td class="text-slate-500">{{ $loop->iteration }}</td>
                            @foreach ($questions as $question)
                                @php
                                    $answer = $row->jawaban[$question->id] ?? null;
                                    $isSig = $question->tipe === 'signature';
                                    if ($question->tipe === 'checkbox') {
                                        $display = is_array($answer) && $answer ? implode(', ', $answer) : '-';
                                    } else {
                                        $display = is_string($answer) && trim($answer) !== '' ? $answer : '-';
                                    }
                                @endphp
                                <td class="{{ $isSig ? 'text-center' : '' }}">
                                    @if ($isSig && str_starts_with((string) $display, 'data:image'))
                                        <img src="{{ $display }}" alt="Tanda tangan" style="max-height:56px" class="mx-auto w-auto rounded bg-white object-contain ring-1 ring-slate-100">
                                    @else
                                        {{ $isSig && $display === '-' ? '' : $display }}
                                    @endif
                                </td>
                            @endforeach
                            <td class="text-right">
                                <form method="POST" action="{{ route('fk.kegiatan-form.isian.destroy', [$form->id, $row->id]) }}" onsubmit="return confirm('Hapus isian ini?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="settings-icon-action settings-icon-action--delete" aria-label="Hapus isian" title="Hapus isian"><i class="bi bi-trash3" aria-hidden="true"></i></button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ $questions->count() + 2 }}" class="px-4 py-10 text-center">
                                <span class="mx-auto grid size-11 place-items-center rounded-xl bg-blue-50 text-xl text-blue-600"><i class="bi bi-inbox" aria-hidden="true"></i></span>
                                <p class="mt-3 font-semibold text-slate-700">Belum ada isian</p>
                                <p class="mt-1 text-xs text-slate-500">Klik "Tambah Isian" untuk mengisi form ini.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>
@endsection