<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detail Bank Soal SIKK</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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">
    <style>
        .header-section {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
            padding: 2rem 0;
        }
        .card {
            border: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 15px;
        }
        .info-label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 0.5rem;
        }
        .info-value {
            background: #f8f9fa;
            padding: 0.75rem;
            border-radius: 8px;
            border-left: 4px solid #2a5298;
        }
        .status-badge {
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
        }
        .aktif { background-color: #d4edda; color: #155724; }
        .tidak-aktif { background-color: #f8d7da; color: #721c24; }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="header-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1 class="mb-2">
                        <i class="fas fa-eye me-3"></i>
                        Detail Bank Soal SIKK
                    </h1>
                    <p class="mb-0 fs-5"><?php echo e($soal->kode_ikk); ?> - <?php echo e($soal->ikk_output); ?></p>
                </div>
                <div class="col-md-4 text-end">
                    <a href="<?php echo e(route('sikk.bank-soal.index')); ?>" class="btn btn-light me-2">
                        <i class="fas fa-arrow-left me-2"></i>Kembali
                    </a>
                    <a href="<?php echo e(route('sikk.bank-soal.edit', $soal->id)); ?>" class="btn btn-warning">
                        <i class="fas fa-edit me-2"></i>Edit
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container my-5">
        <div class="row">
            <!-- Informasi Dasar -->
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-info-circle me-2"></i>
                            Informasi Dasar
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="info-label">Kode IKK</div>
                            <div class="info-value fw-bold text-primary fs-5"><?php echo e($soal->kode_ikk); ?></div>
                        </div>

                        <div class="mb-3">
                            <div class="info-label">Urusan</div>
                            <div class="info-value"><?php echo e($soal->urusan); ?></div>
                        </div>

                        <div class="mb-3">
                            <div class="info-label">Bidang</div>
                            <div class="info-value"><?php echo e($soal->bidang); ?></div>
                        </div>

                        <div class="mb-3">
                            <div class="info-label">OPD Penanggung Jawab</div>
                            <div class="info-value"><?php echo e($soal->opd_penanggung_jawab); ?></div>
                        </div>

                        <div class="row">
                            <div class="col-6">
                                <div class="info-label">Tahun Mulai</div>
                                <div class="info-value"><?php echo e($soal->tahun_mulai); ?></div>
                            </div>
                            <div class="col-6">
                                <div class="info-label">Status</div>
                                <div class="info-value">
                                    <span class="status-badge <?php echo e(strtolower(str_replace(' ', '-', $soal->status))); ?>">
                                        <?php echo e($soal->status); ?>

                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Indikator Kinerja -->
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-target me-2"></i>
                            Indikator Kinerja
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="info-label">IKK Output</div>
                            <div class="info-value"><?php echo e($soal->ikk_output); ?></div>
                        </div>

                        <div class="mb-3">
                            <div class="info-label">IKK Outcome</div>
                            <div class="info-value"><?php echo e($soal->ikk_outcome); ?></div>
                        </div>

                        <div class="row">
                            <div class="col-6">
                                <div class="info-label">Satuan</div>
                                <div class="info-value"><?php echo e($soal->satuan); ?></div>
                            </div>
                            <div class="col-6">
                                <div class="info-label">Sumber Data</div>
                                <div class="info-value"><?php echo e($soal->sumber_data); ?></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Rumus Perhitungan -->
        <div class="card mb-4">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">
                    <i class="fas fa-calculator me-2"></i>
                    Rumus Perhitungan
                </h5>
            </div>
            <div class="card-body">
                <div class="info-value">
                    <code class="fs-6"><?php echo e($soal->rumus_perhitungan); ?></code>
                </div>
            </div>
        </div>

        <!-- Aksi -->
        <div class="card">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0">
                    <i class="fas fa-cogs me-2"></i>
                    Aksi Tersedia
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="d-grid">
                            <a href="<?php echo e(route('sikk.bank-soal.edit', $soal->id)); ?>" class="btn btn-warning btn-lg">
                                <i class="fas fa-edit me-2"></i>
                                Edit Soal
                            </a>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-grid">
                            <button class="btn btn-success btn-lg" onclick="alert('Fitur Pelaporan IKK akan segera tersedia')">
                                <i class="fas fa-clipboard-list me-2"></i>
                                Gunakan untuk Pelaporan IKK
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html><?php /**PATH /Users/user/Documents/giriwidyan/project/inhouse/skm/resources/views/sikk/bank_soal/show.blade.php ENDPATH**/ ?>