<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Isian Jawaban - Pelaporan IKK</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-light">
    <div class="container-fluid py-4">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="fas fa-edit me-2"></i>Isian Jawaban Pelaporan IKK</h5>
                    </div>
                    <div class="card-body">
                        <!-- Info Pelaporan -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <strong>Kode IKK:</strong> {{ $pelaporan['kode_ikk'] }}
                            </div>
                            <div class="col-md-6">
                                <strong>OPD:</strong> {{ $pelaporan['opd'] }}
                            </div>
                            <div class="col-12 mt-2">
                                <strong>Indikator:</strong> {{ $pelaporan['ikk_output'] }}
                            </div>
                        </div>

                        <form action="{{ route('ikk.pelaporan.jawaban.submit', $pelaporan['id']) }}" method="POST">
                            @csrf
                            
                            @foreach($pertanyaan as $index => $item)
                            <div class="mb-4">
                                <label class="form-label fw-bold">{{ $index + 1 }}. {{ $item['pertanyaan'] }}</label>
                                <textarea name="jawaban[{{ $item['id'] }}]" class="form-control" rows="4" placeholder="Masukkan jawaban Anda..." required>{{ old('jawaban.' . $item['id']) }}</textarea>
                            </div>
                            @endforeach

                            <div class="d-flex justify-content-between">
                                <a href="{{ route('ikk.pelaporan.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left me-1"></i>Kembali
                                </a>
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-save me-1"></i>Simpan Jawaban
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>