<?php $__env->startSection('content'); ?>

<style>
    /* --- HANYA CSS SPESIFIK HALAMAN INI (Asesmen) --- */
    /* Warna elemen standar sudah diatur secara terpusat di app.blade.php */

    .modern-card {
        border-radius: 20px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    [data-theme="dark"] .modern-card {
        background-color: var(--bg-card, #1e293b);
        border: 1px solid var(--border-color, #334155);
    }

    /* Styling Accordion Modern */
    .accordion-asesmen .accordion-item {
        border: 1px solid var(--border-color, #dee2e6);
        border-radius: 16px !important;
        margin-bottom: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        overflow: hidden;
        background-color: transparent;
    }
    .accordion-asesmen .accordion-button {
        font-size: 1.05rem;
        padding: 1.25rem 1.5rem;
    }
    .accordion-asesmen .accordion-button:not(.collapsed) {
        background-color: rgba(59, 130, 246, 0.05);
        color: var(--primary-color, #3b82f6);
        box-shadow: none;
        border-bottom: 1px solid var(--border-color, #334155);
    }
    .accordion-asesmen .accordion-body { padding: 1.5rem; }
    
    [data-theme="dark"] .accordion-asesmen .accordion-item { background-color: var(--bg-card); border-color: var(--border-color); }
    [data-theme="dark"] .accordion-asesmen .accordion-button { background-color: var(--bg-card); color: var(--text-main); }
    [data-theme="dark"] .accordion-asesmen .accordion-button:not(.collapsed) { background-color: var(--hover-bg); color: #6ea8fe; border-bottom: 1px solid var(--border-color); }
    [data-theme="dark"] .accordion-asesmen .accordion-button::after { filter: invert(1); }
    [data-theme="dark"] .accordion-asesmen .accordion-body { background-color: var(--bg-card); }
    
    /* Helper Kustom Tambahan */
    .bg-inner-card { background-color: var(--hover-bg); }
    .btn-pill { border-radius: 50rem !important; }
</style>

<div class="container py-4">
    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold"><i class="bi bi-clipboard-check me-2 text-primary"></i>Asesmen & Evaluasi</h2>
            <p class="text-muted mb-0">Bank Soal, Rubrik Penilaian, dan Program Remedial</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-secondary btn-pill px-4 shadow-sm" data-bs-toggle="modal" data-bs-target="#modalCetak">
                <i class="bi bi-printer me-1"></i> Cetak
            </button>
            <button class="btn btn-primary btn-pill px-4 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalAsesmen">
                <i class="bi bi-plus-circle me-1"></i> Buat Asesmen
            </button>
        </div>
    </div>

    <?php if(session('success')): ?>
    <div class="alert alert-success alert-dismissible fade show rounded-4 bg-success bg-opacity-10 border-0 border-start border-success border-4 text-success shadow-sm">
        <i class="bi bi-check-circle-fill me-2"></i> <?php echo e(session('success')); ?>

        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <?php endif; ?>

    
    <?php
        $groupedAssessments = $assessments->groupBy(function($item) {
            return $item->subject->name ?? 'Tanpa Mata Pelajaran';
        })->map(function($group) {
            return $group->sortByDesc('created_at')->values();
        });
    ?>

    <div class="accordion accordion-asesmen" id="accordionAsesmenMapel">
        <?php $__empty_1 = true; $__currentLoopData = $groupedAssessments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $subjectName => $subjectAssessments): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <div class="accordion-item shadow-sm">
                <h2 class="accordion-header" id="heading-<?php echo e($loop->index); ?>">
                    <button class="accordion-button fw-bold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-<?php echo e($loop->index); ?>" aria-expanded="false" aria-controls="collapse-<?php echo e($loop->index); ?>">
                        <div class="d-flex align-items-center w-100">
                            <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <i class="bi bi-journal-check"></i> 
                            </div>
                            <span class="fs-5"><?php echo e($subjectName); ?></span>
                            <span class="badge bg-primary ms-auto me-3 rounded-pill px-3 py-2"><?php echo e($subjectAssessments->count()); ?> Asesmen</span>
                        </div>
                    </button>
                </h2>
                <div id="collapse-<?php echo e($loop->index); ?>" class="accordion-collapse collapse" aria-labelledby="heading-<?php echo e($loop->index); ?>">
                    <div class="accordion-body p-4" style="background-color: rgba(0,0,0,0.02);">
                        <div class="row">
                            <?php $__currentLoopData = $subjectAssessments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="col-md-6 mb-4">
                                <div class="card modern-card h-100 shadow-sm border-secondary">
                                    <div class="card-header d-flex justify-content-between align-items-center bg-transparent border-bottom-0 pt-4 pb-0">
                                        <span class="badge bg-primary bg-opacity-10 text-primary border border-primary-subtle rounded-pill px-3 py-2"><?php echo e($item->subject->name); ?></span>
                                        <small class="text-muted fw-bold"><i class="bi bi-calendar3 me-1"></i> <?php echo e($item->created_at->format('d M Y')); ?></small>
                                    </div>
                                    <div class="card-body px-4">
                                        <h5 class="card-title fw-bold mb-3"><?php echo e($item->title); ?></h5>
                                        <div class="mb-3 d-flex flex-wrap gap-2">
                                            <span class="badge bg-info bg-opacity-10 text-info border border-info-subtle rounded-pill px-3 py-2"><i class="bi bi-tag me-1"></i> <?php echo e(ucfirst($item->type)); ?></span>
                                            <span class="badge bg-secondary bg-opacity-10 text-secondary border border-secondary-subtle rounded-pill px-3 py-2"><i class="bi bi-pen me-1"></i> <?php echo e(ucfirst($item->technique)); ?></span>
                                        </div>
                                        
                                        <div class="small p-3 rounded-4 border border-secondary" style="border-left: 4px solid #0dcaf0 !important; background-color: rgba(255,255,255,0.02);">
                                            <strong class="text-info d-block mb-1">Preview Soal:</strong>
                                            <span style="line-height: 1.6;"><?php echo e(Str::limit($item->questions, 120)); ?></span>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-transparent border-top-0 pb-4 pt-0 px-4">
                                        <div class="d-flex justify-content-end gap-2">
                                            <button class="btn btn-sm btn-outline-info btn-pill px-3" data-bs-toggle="modal" data-bs-target="#detailModal<?php echo e($item->id); ?>" title="Lihat Detail">
                                                <i class="bi bi-eye me-1"></i> Detail
                                            </button>
                                            <button class="btn btn-sm btn-outline-warning btn-pill px-3" data-bs-toggle="modal" data-bs-target="#editModal<?php echo e($item->id); ?>" title="Edit">
                                                <i class="bi bi-pencil me-1"></i> Edit
                                            </button>
                                            <form action="<?php echo e(route('asesmen.destroy', $item->id)); ?>" method="POST" onsubmit="return confirm('Hapus asesmen ini?')">
                                                <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                                                <button class="btn btn-sm btn-outline-danger btn-pill px-3" title="Hapus"><i class="bi bi-trash me-1"></i> Hapus</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </div>
                    </div>
                </div>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div class="card modern-card border-0 py-5 text-center">
                <div class="card-body">
                    <div class="mb-3 text-muted opacity-50"><i class="bi bi-clipboard-x" style="font-size: 4rem;"></i></div>
                    <h5 class="fw-bold">Belum Ada Asesmen</h5>
                    <p class="text-muted">Mulai buat bank soal asesmen dan evaluasi Anda sekarang.</p>
                </div>
            </div>
        <?php endif; ?>
    </div>
</div>


<div class="modal fade" id="modalCetak" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-secondary shadow-lg rounded-4">
            <div class="modal-header bg-secondary border-0 text-white rounded-top-4 py-3">
                <h5 class="modal-title fw-bold"><i class="bi bi-printer me-2"></i> Pilih Asesmen untuk Dicetak</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="<?php echo e(route('asesmen.print_bulk')); ?>" method="POST" target="_blank">
                <?php echo csrf_field(); ?>
                <div class="modal-body p-4">
                    <div class="table-responsive border border-secondary rounded-4 overflow-hidden" style="max-height: 400px; overflow-y: auto;">
                        <table class="table table-hover mb-0">
                            <thead class="table-secondary sticky-top">
                                <tr>
                                    <th width="50" class="text-center align-middle"><input type="checkbox" id="checkAll" class="form-check-input mt-1" style="cursor:pointer; width:1.2rem; height:1.2rem;"></th>
                                    <th class="align-middle">Judul Asesmen</th>
                                    <th class="align-middle">Mapel</th>
                                    <th class="align-middle">Jenis</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php $__currentLoopData = $assessments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $m): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <tr>
                                    <td class="text-center align-middle border-secondary"><input type="checkbox" name="assessment_ids[]" value="<?php echo e($m->id); ?>" class="check-item form-check-input mt-1" style="cursor:pointer; width:1.2rem; height:1.2rem;"></td>
                                    <td class="align-middle border-secondary fw-bold"><?php echo e($m->title); ?></td>
                                    <td class="align-middle border-secondary"><?php echo e($m->subject->name); ?></td>
                                    <td class="align-middle border-secondary"><?php echo e(ucfirst($m->type)); ?></td>
                                </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer border-0 py-3 bg-inner-card rounded-bottom-4">
                    <button type="button" class="btn btn-outline-secondary btn-pill px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary btn-pill px-4 fw-bold shadow-sm"><i class="bi bi-printer me-1"></i> Cetak Terpilih</button>
                </div>
            </form>
        </div>
    </div>
</div>


<?php $__currentLoopData = $assessments; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    
    <div class="modal fade" id="detailModal<?php echo e($item->id); ?>" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content rounded-4 border-secondary shadow-lg">
                <div class="modal-header bg-info border-0 text-dark rounded-top-4 py-3">
                    <h5 class="modal-title fw-bold"><i class="bi bi-file-text me-2"></i> <?php echo e($item->title); ?></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="p-4 rounded-4 mb-4 border border-secondary" style="background-color: rgba(255,255,255,0.02);">
                        <h6 class="fw-bold text-primary border-bottom border-secondary pb-2 mb-3"><i class="bi bi-question-circle me-1"></i> Soal / Instrumen:</h6>
                        <p class="mt-2 mb-0" style="white-space: pre-line; line-height: 1.6;"><?php echo e($item->questions); ?></p>
                    </div>
                    <div class="p-4 rounded-4 mb-4 border border-secondary" style="background-color: rgba(255,255,255,0.02);">
                        <h6 class="fw-bold text-success border-bottom border-secondary pb-2 mb-3"><i class="bi bi-check2-square me-1"></i> Rubrik Penilaian / Kunci:</h6>
                        <p class="mt-2 mb-0" style="white-space: pre-line; line-height: 1.6;"><?php echo e($item->rubric ?? '-'); ?></p>
                    </div>
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="p-4 rounded-4 h-100 border border-secondary" style="background-color: rgba(255,255,255,0.02);">
                                <h6 class="fw-bold text-warning border-bottom border-secondary pb-2 mb-3"><i class="bi bi-arrow-repeat me-1"></i> Rencana Remedial:</h6>
                                <p class="mt-2 mb-0" style="white-space: pre-line; line-height: 1.6;"><?php echo e($item->remedial_plan ?? '-'); ?></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-4 rounded-4 h-100 border border-secondary" style="background-color: rgba(255,255,255,0.02);">
                                <h6 class="fw-bold text-info border-bottom border-secondary pb-2 mb-3"><i class="bi bi-stars me-1"></i> Rencana Pengayaan:</h6>
                                <p class="mt-2 mb-0" style="white-space: pre-line; line-height: 1.6;"><?php echo e($item->enrichment ?? '-'); ?></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 py-3 bg-inner-card rounded-bottom-4">
                    <button type="button" class="btn btn-outline-secondary btn-pill px-4" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    
    <div class="modal fade" id="editModal<?php echo e($item->id); ?>" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content rounded-4 border-secondary shadow-lg">
                <div class="modal-header bg-warning border-0 text-dark rounded-top-4 py-3">
                    <h5 class="modal-title fw-bold"><i class="bi bi-pencil-square me-2"></i> Edit Asesmen</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="<?php echo e(route('asesmen.update', $item->id)); ?>" method="POST">
                    <?php echo csrf_field(); ?> <?php echo method_field('PUT'); ?>
                    <div class="modal-body p-4">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small text-muted text-uppercase">Mata Pelajaran</label>
                                <select name="subject_id" class="form-select py-2 rounded-pill" required>
                                    <?php $__currentLoopData = $subjects; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $s): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> 
                                        <option value="<?php echo e($s->id); ?>" <?php echo e($item->subject_id == $s->id ? 'selected' : ''); ?>><?php echo e($s->name); ?></option> 
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small text-muted text-uppercase">Judul Asesmen</label>
                                <input type="text" name="title" class="form-control py-2 rounded-pill" value="<?php echo e($item->title); ?>" required>
                            </div>
                        </div>

                        <div class="row p-4 rounded-4 border border-secondary mb-4 mx-0" style="background-color: rgba(255,255,255,0.02);">
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-bold small text-muted text-uppercase">Jenis Asesmen</label>
                                <select name="type" class="form-select" required>
                                    <option value="formatif" <?php echo e($item->type == 'formatif' ? 'selected' : ''); ?>>Formatif</option>
                                    <option value="sumatif" <?php echo e($item->type == 'sumatif' ? 'selected' : ''); ?>>Sumatif</option>
                                    <option value="diagnostik" <?php echo e($item->type == 'diagnostik' ? 'selected' : ''); ?>>Diagnostik</option>
                                </select>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-bold small text-muted text-uppercase">Teknik Penilaian</label>
                                <select name="technique" class="form-select" required>
                                    <option value="tulis" <?php echo e($item->technique == 'tulis' ? 'selected' : ''); ?>>Tes Tulis</option>
                                    <option value="lisan" <?php echo e($item->technique == 'lisan' ? 'selected' : ''); ?>>Tes Lisan</option>
                                    <option value="proyek" <?php echo e($item->technique == 'proyek' ? 'selected' : ''); ?>>Proyek</option>
                                    <option value="portofolio" <?php echo e($item->technique == 'portofolio' ? 'selected' : ''); ?>>Portofolio</option>
                                </select>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label fw-bold small text-muted text-uppercase">Skor Total</label>
                                <input type="number" name="total_score" class="form-control" value="<?php echo e($item->total_score); ?>">
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Butir Soal</label>
                            <textarea name="questions" class="form-control rounded-4" rows="6" required><?php echo e($item->questions); ?></textarea>
                        </div>
                        <div class="mb-4">
                            <label class="form-label fw-bold small text-muted text-uppercase">Rubrik / Kunci Jawaban</label>
                            <textarea name="rubric" class="form-control rounded-4" rows="5"><?php echo e($item->rubric); ?></textarea>
                        </div>
                        <div class="row g-4">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small text-muted text-uppercase">Soal Remedial</label>
                                <textarea name="remedial_plan" class="form-control rounded-4" rows="5"><?php echo e($item->remedial_plan); ?></textarea>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold small text-muted text-uppercase">Soal Pengayaan</label>
                                <textarea name="enrichment" class="form-control rounded-4" rows="5"><?php echo e($item->enrichment); ?></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 py-3 bg-inner-card rounded-bottom-4">
                        <button type="button" class="btn btn-outline-secondary btn-pill px-4" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-warning btn-pill px-5 fw-bold text-dark shadow-sm"><i class="bi bi-check-circle me-1"></i> Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>


<div class="modal fade" id="modalAsesmen" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content rounded-4 border-secondary shadow-lg">
            <div class="modal-header bg-primary border-0 text-white rounded-top-4 py-3">
                <h5 class="modal-title fw-bold"><i class="bi bi-robot me-2"></i> Buat Asesmen Baru</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            
            <form action="<?php echo e(route('asesmen.store')); ?>" method="POST" id="formCreateAsesmen">
                <?php echo csrf_field(); ?>
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Mata Pelajaran <span class="text-danger">*</span></label>
                            <select name="subject_id" id="ai_subject" class="form-select rounded-pill py-2" required>
                                <option value="" selected disabled>-- Pilih Mapel --</option>
                                <?php $__currentLoopData = $subjects; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $s): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?> 
                                    <option value="<?php echo e($s->id); ?>" data-name="<?php echo e($s->name); ?>"><?php echo e($s->name); ?></option> 
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Judul Asesmen <span class="text-danger">*</span></label>
                            <input type="text" name="title" id="ai_title" class="form-control rounded-pill py-2" placeholder="Cth: Ulangan Harian Bab 1" required>
                        </div>
                    </div>

                    <div class="row p-4 rounded-4 border border-secondary mb-4 mx-0" style="background-color: rgba(255,255,255,0.02);">
                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Jenis <span class="text-danger">*</span></label>
                            <select name="type" id="ai_type" class="form-select" required>
                                <option value="" selected disabled>-- Pilih Jenis --</option>
                                <option value="formatif">Formatif</option>
                                <option value="sumatif">Sumatif</option>
                                <option value="diagnostik">Diagnostik</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Teknik <span class="text-danger">*</span></label>
                            <select name="technique" id="ai_technique" class="form-select" required>
                                <option value="" selected disabled>-- Pilih Teknik --</option>
                                <option value="tulis">Tes Tulis</option>
                                <option value="lisan">Tes Lisan</option>
                                <option value="proyek">Proyek</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Bentuk (AI) <span class="text-danger">*</span></label>
                            <select id="ai_form_type" class="form-select" required>
                                <option value="" selected disabled>-- Pilih Bentuk --</option>
                                <option value="Pilihan Ganda">Pilihan Ganda</option>
                                <option value="Uraian / Essay">Uraian / Essay</option>
                                <option value="Isian Singkat">Isian Singkat</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Skor Total</label>
                            <input type="number" name="total_score" id="ai_score" class="form-control" placeholder="100" value="100" required>
                        </div>
                    </div>

                    
                    <div class="p-4 mb-4 rounded-4 border border-primary border-opacity-50" style="background: linear-gradient(145deg, rgba(59,130,246,0.1) 0%, rgba(59,130,246,0.02) 100%);">
                        <h6 class="text-primary fw-bold border-bottom border-primary border-opacity-25 pb-2 mb-3"><i class="bi bi-cpu me-1"></i> Generator AI</h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <input type="text" id="ai_topic" class="form-control rounded-pill py-2" placeholder="Topik Utama (Wajib Diisi)">
                            </div>
                            <div class="col-md-3 mb-3">
                                <input type="number" id="ai_duration" class="form-control rounded-pill py-2" placeholder="Durasi (mnt)">
                            </div>
                            <div class="col-md-3 mb-3">
                                <input type="number" id="ai_count" class="form-control rounded-pill py-2" placeholder="Jml Soal" >
                            </div>
                            <div class="col-12 mb-3">
                                <textarea id="ai_material" class="form-control rounded-4" rows="3" placeholder="Detail Materi (Opsional) - Contoh: Fokuskan pada fungsi komponen utama dan cara kerjanya..."></textarea>
                            </div>
                            <div class="col-12 mt-2">
                                <button type="button" id="btnGenerateAI" class="btn btn-primary btn-pill w-100 fw-bold shadow-sm py-2">
                                    <i class="bi bi-magic me-1"></i> Generate Konten dengan AI
                                </button>
                            </div>
                        </div>
                        <div id="loadingIndicator" class="text-center mt-4" style="display:none;">
                            <div class="spinner-border text-primary" role="status"></div>
                            <div class="text-primary mt-2 fw-bold">AI sedang menyusun soal. Harap tunggu...</div>
                        </div>
                    </div>
                    
                    
                    <div class="mb-4">
                        <label class="form-label fw-bold small text-muted text-uppercase">Butir Soal</label>
                        <textarea name="questions" id="q_soal" class="form-control rounded-4" rows="8" placeholder="Hasil generate soal akan muncul di sini..." required></textarea>
                    </div>                  
                    <div class="mb-4">
                        <label class="form-label fw-bold small text-muted text-uppercase">Rubrik / Kunci Jawaban</label>
                        <textarea name="rubric" id="q_rubrik" class="form-control rounded-4" rows="5"></textarea>
                    </div>
                    <div class="row g-4">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Soal Pengayaan</label>
                            <textarea name="enrichment" id="q_pengayaan" class="form-control rounded-4" rows="5"></textarea>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold small text-muted text-uppercase">Soal Remedial</label>
                            <textarea name="remedial_plan" id="q_remedial" class="form-control rounded-4" rows="5"></textarea>
                        </div>
                    </div>

                </div>
                <div class="modal-footer border-0 py-3 bg-inner-card rounded-bottom-4">
                    <button type="button" class="btn btn-outline-secondary btn-pill px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success btn-pill px-5 fw-bold shadow-sm"><i class="bi bi-save me-1"></i> Simpan Asesmen</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    
    // --- 1. RESET FORM ---
    const modalAsesmen = document.getElementById('modalAsesmen');
    if (modalAsesmen) {
        modalAsesmen.addEventListener('show.bs.modal', function () {
            document.getElementById('formCreateAsesmen').reset();
            ['q_soal', 'q_rubrik', 'q_remedial', 'q_pengayaan'].forEach(id => {
                const el = document.getElementById(id);
                if(el) el.value = '';
            });
            const btnAI = document.getElementById('btnGenerateAI');
            if(btnAI) {
                btnAI.disabled = false;
                btnAI.innerHTML = '<i class="bi bi-magic me-1"></i> Generate Konten dengan AI';
            }
            document.getElementById('loadingIndicator').style.display = 'none';
        });
    }

    // --- 2. SELECT ALL CETAK ---
    let checkAllBtn = document.getElementById('checkAll');
    if(checkAllBtn){
        checkAllBtn.addEventListener('click', function() {
            let checkboxes = document.querySelectorAll('.check-item');
            checkboxes.forEach((checkbox) => { checkbox.checked = this.checked; });
        });
    }

    // --- 3. FORMATTER OUTPUT AI ---
    function formatAIOutput(data) {
        if (!data) return "";
        let content = "";
        if (Array.isArray(data)) {
            content = data.map(item => item.trim()).join('\n');
        } else {
            content = data;
        }
        return content.replace(/\n\s*\n/g, '\n').trim();
    }

    // --- 4. LOGIC GENERATE AI ---
    const btnAI = document.getElementById('btnGenerateAI');
    if(btnAI) {
        btnAI.addEventListener('click', async function() {
            const subjectSelect = document.getElementById('ai_subject');
            if(subjectSelect.selectedIndex === 0 || !subjectSelect.value) { 
                alert("Pilih Mata Pelajaran terlebih dahulu."); 
                return; 
            }
            
            const mapelName = subjectSelect.options[subjectSelect.selectedIndex].getAttribute('data-name');
            const topik = document.getElementById('ai_topic').value;
            const materi = document.getElementById('ai_material').value;
            const bentuk = document.getElementById('ai_form_type').value;
            const jenis = document.getElementById('ai_type').value;
            const teknik = document.getElementById('ai_technique').value;
            const jumlah = document.getElementById('ai_count').value || '5';
            
            if(!jenis) { alert("Pilih Jenis Asesmen terlebih dahulu."); return; }
            if(!teknik) { alert("Pilih Teknik Penilaian terlebih dahulu."); return; }
            if(!bentuk) { alert("Pilih Bentuk Soal terlebih dahulu."); return; }
            if(!topik) { alert("Mohon isi Topik asesmen terlebih dahulu."); return; }

            document.getElementById('loadingIndicator').style.display = 'block';
            btnAI.disabled = true;
            btnAI.innerHTML = '<i class="spinner-border spinner-border-sm me-2"></i> Menghubungi AI...';

            const jumlahTambahan = Math.ceil(parseInt(jumlah) / 2);

            let instruksiBentuk = `Bentuk soal adalah ${bentuk}.`;
            if (bentuk.toLowerCase().includes('pilihan ganda')) {
                instruksiBentuk = `PENTING: Karena 'Pilihan Ganda', WAJIB sertakan opsi A-E di bawah pertanyaan.\nFormat:\n1. Pertanyaan..\n   A. Opsi\n   B. Opsi\n   ...`;
            }

            const apiKey = "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"; 
            
            const messages = [
                {
                    role: "system",
                    content: "Anda adalah Guru SMK. Buat JSON Asesmen."
                },
                {
                    role: "user",
                    content: `Buatkan soal ujian.
                    - Mapel: ${mapelName}
                    - Topik: ${topik} (${materi})
                    - Bentuk: ${bentuk}
                    - Jml: ${jumlah}
                    
                    ${instruksiBentuk}
                    
                    OUTPUT JSON (RFC8259) ONLY:
                    {
                        "soal": "(Gabungan ${jumlah} soal utama)",
                        "rubrik": "(Kunci Jawaban)",
                        "remedial": "(${jumlahTambahan} soal remedial)",
                        "pengayaan": "(${jumlahTambahan} soal pengayaan)"
                    }
                    Gunakan '\\n' untuk baris baru.`
                }
            ];

            try {
                const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "Authorization": `Bearer ${apiKey}`
                    },
                    body: JSON.stringify({
                        model: "llama-3.3-70b-versatile",
                        messages: messages,
                        temperature: 0.7,
                        response_format: { type: "json_object" }
                    })
                });

                if (!response.ok) throw new Error(`API Error: ${response.status}`);
                const data = await response.json();
                const result = JSON.parse(data.choices[0].message.content);

                if(result.soal) {
                    document.getElementById('q_soal').value = formatAIOutput(result.soal);
                    document.getElementById('q_rubrik').value = formatAIOutput(result.rubrik);
                    document.getElementById('q_remedial').value = formatAIOutput(result.remedial);
                    document.getElementById('q_pengayaan').value = formatAIOutput(result.pengayaan);
                } else {
                    alert("Gagal parsing JSON dari AI.");
                }

            } catch (error) {
                console.error(error);
                alert("Gagal: " + error.message);
            } finally {
                document.getElementById('loadingIndicator').style.display = 'none';
                btnAI.disabled = false;
                btnAI.innerHTML = '<i class="bi bi-magic me-1"></i> Generate Konten dengan AI';
            }
        });
    }
});
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/vol15_7/infinityfree.com/if0_40829333/sislajar-skansa.gt.tc/htdocs/resources/views/pages/perangkat/asesmen/index.blade.php ENDPATH**/ ?>