<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Isi Lembar Jawab 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-10">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="fas fa-clipboard-list me-2"></i>Isi Lembar Jawab IKK</h5>
                    </div>
                    <div class="card-body">
                        <form action="<?php echo e(route('ikk.lembar-jawab.store')); ?>" method="POST" enctype="multipart/form-data">
                            <?php echo csrf_field(); ?>
                            
                            <!-- Bagian ATAS -->
                            <div class="row mb-4">
                                <div class="col-md-4">
                                    <label class="form-label fw-bold">OPD <span class="text-danger">*</span></label>
                                    <input type="text" name="opd" class="form-control" value="<?php echo e($opd); ?>" required>
                                    <small class="text-muted">Nama OPD Anda</small>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-bold">Tahun <span class="text-danger">*</span></label>
                                    <input type="number" name="tahun" class="form-control" value="<?php echo e($tahun); ?>" min="2020" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-bold">Pilih Bank Soal IKK <span class="text-danger">*</span></label>
                                    <select name="bank_soal_id" id="bankSoalSelect" class="form-select" required>
                                        <option value="">-- Pilih IKK --</option>
                                        <?php $__currentLoopData = $bankSoalList; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $soal): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($soal->id); ?>"
                                                    data-kode="<?php echo e($soal->kode_ikk); ?>"
                                                    data-output="<?php echo e($soal->ikk_output); ?>"
                                                    data-outcome="<?php echo e($soal->ikk_outcome); ?>"
                                                    data-rumus="<?php echo e($soal->rumus_perhitungan); ?>"
                                                    data-satuan="<?php echo e($soal->satuan); ?>"
                                                    <?php echo e($bankSoal && $bankSoal->id == $soal->id ? 'selected' : ''); ?>>
                                                <?php echo e($soal->kode_ikk); ?> - <?php echo e($soal->ikk_output); ?>

                                            </option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </select>
                                </div>
                            </div>

                            <hr>

                            <!-- Bagian TENGAH (SOAL - READONLY) -->
                            <div id="soalDetail" style="<?php echo e($bankSoal ? '' : 'display:none;'); ?>">
                                <h6 class="text-primary mb-3"><i class="fas fa-info-circle me-2"></i>Informasi Indikator</h6>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">Kode IKK</label>
                                        <input type="text" id="displayKode" class="form-control" value="<?php echo e($bankSoal ? $bankSoal->kode_ikk : ''); ?>" readonly>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">Satuan</label>
                                        <input type="text" id="displaySatuan" class="form-control" value="<?php echo e($bankSoal ? $bankSoal->satuan : ''); ?>" readonly>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-bold">IKK Output</label>
                                    <input type="text" id="displayOutput" class="form-control" value="<?php echo e($bankSoal ? $bankSoal->ikk_output : ''); ?>" readonly>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label fw-bold">IKK Outcome</label>
                                    <textarea id="displayOutcome" class="form-control" rows="2" readonly><?php echo e($bankSoal ? $bankSoal->ikk_outcome : ''); ?></textarea>
                                </div>

                                <div class="mb-4">
                                    <label class="form-label fw-bold">Rumus Perhitungan</label>
                                    <textarea id="displayRumus" class="form-control" rows="2" readonly><?php echo e($bankSoal ? $bankSoal->rumus_perhitungan : ''); ?></textarea>
                                </div>
                            </div>

                            <hr>

                            <!-- Bagian BAWAH (JAWABAN) -->
                            <div id="jawabanSection" style="<?php echo e($bankSoal ? '' : 'display:none;'); ?>">
                                <h6 class="text-success mb-3"><i class="fas fa-edit me-2"></i>Isian Jawaban</h6>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label fw-bold">Capaian <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="number" name="capaian" class="form-control" step="0.01" required>
                                            <span class="input-group-text" id="satuanDisplay"><?php echo e($bankSoal ? $bankSoal->satuan : '%'); ?></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label fw-bold">Kendala / Masalah <span class="text-danger">*</span></label>
                                <textarea name="kendala" class="form-control" rows="4" placeholder="Jelaskan kendala atau masalah yang dihadapi..." required></textarea>
                            </div>
                            
                            <div class="mb-3">
                                <label class="form-label fw-bold">Tindak Lanjut <span class="text-danger">*</span></label>
                                <textarea name="tindak_lanjut" class="form-control" rows="4" placeholder="Jelaskan rencana tindak lanjut..." required></textarea>
                            </div>
                            
                            <div class="mb-4">
                                <label class="form-label fw-bold">Upload Bukti</label>
                                <input type="file" name="file_bukti" class="form-control" accept=".pdf,.jpg,.jpeg,.png">
                                <small class="text-muted">Format: PDF, JPG, PNG. Maksimal 5MB</small>
                            </div>

                            <!-- Button -->
                            <div class="d-flex justify-content-between">
                                <a href="<?php echo e(route('ikk.lembar-jawab.index')); ?>" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left me-1"></i>Kembali
                                </a>
                                <div>
                                    <button type="submit" name="action" value="draft" class="btn btn-outline-primary me-2">
                                        <i class="fas fa-save me-1"></i>Simpan Draft
                                    </button>
                                    <button type="submit" name="action" value="ajukan" class="btn btn-success">
                                        <i class="fas fa-paper-plane me-1"></i>Ajukan Verifikasi
                                    </button>
                                </div>
                            </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>
    <script>
        document.getElementById('bankSoalSelect').addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];

            if (this.value) {
                // Show sections
                document.getElementById('soalDetail').style.display = 'block';
                document.getElementById('jawabanSection').style.display = 'block';

                // Update readonly fields
                document.getElementById('displayKode').value = selectedOption.dataset.kode;
                document.getElementById('displayOutput').value = selectedOption.dataset.output;
                document.getElementById('displayOutcome').value = selectedOption.dataset.outcome;
                document.getElementById('displayRumus').value = selectedOption.dataset.rumus;
                document.getElementById('displaySatuan').value = selectedOption.dataset.satuan;
                document.getElementById('satuanDisplay').textContent = selectedOption.dataset.satuan;
            } else {
                // Hide sections
                document.getElementById('soalDetail').style.display = 'none';
                document.getElementById('jawabanSection').style.display = 'none';
            }
        });
    </script>
</body>
</html><?php /**PATH /Users/user/Documents/giriwidyan/project/inhouse/skm/resources/views/ikk/lembar-jawab/create.blade.php ENDPATH**/ ?>