@extends('adminlte::page')

@section('title', 'Kelola Soal')

{{-- Tambahkan Summernote plugin --}}
@section('plugins.Summernote', true)

@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1><i class="fas fa-edit"></i> Kelola Soal: {{ $exam->name }}</h1>
        </div>
        <div class="col-sm-6 text-right">
            <a href="{{ route('elearning.ujian.index') }}" class="btn btn-default">
                <i class="fas fa-arrow-left"></i> Kembali ke Daftar Ujian
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="row">
    <!-- FORM INPUT SOAL (KIRI) -->
    <div class="col-md-7">
        @if (session('success'))
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <i class="icon fas fa-check"></i> {{ session('success') }}
        </div>
        @endif
        
        <div class="card card-outline card-primary">
            <div class="card-header">
                <h3 class="card-title">Buat Soal Baru</h3>
            </div>
            <form action="{{ route('elearning.ujian.soal.store', $exam->id) }}" method="POST">
                @csrf
                <div class="card-body">

                    {{-- Pilihan Tipe Soal --}}
                    <div class="form-group border rounded p-3 bg-light">
                        <label class="d-block mb-2">Pilih Tipe Soal <span class="text-danger">*</span></label>
                        <div class="custom-control custom-radio custom-control-inline mr-4">
                            <input type="radio" id="typePG" name="question_type" class="custom-control-input" value="multiple_choice" checked>
                            <label class="custom-control-label font-weight-normal" for="typePG"><i class="fas fa-dot-circle text-primary mr-1"></i> Pilihan Ganda</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" id="typeEssay" name="question_type" class="custom-control-input" value="essay">
                            <label class="custom-control-label font-weight-normal" for="typeEssay"><i class="fas fa-edit text-info mr-1"></i> Esai (Penilaian Manual)</label>
                        </div>
                        @error('question_type') <small class="text-danger d-block mt-1">{{ $message }}</small> @enderror
                    </div>

                    <!-- Pertanyaan -->
                    <div class="form-group">
                        <label>Teks Pertanyaan <span class="text-danger">*</span></label>
                        <textarea id="question_text" name="question_text" class="summernote" required></textarea>
                        <small class="text-muted">
                            Gunakan tombol <strong class="text-primary"><i class="fas fa-superscript"></i> Math</strong> di toolbar editor untuk menyisipkan rumus matematika.
                        </small>
                    </div>

                    <!-- Opsi Jawaban (Dynamic Content) -->
                    <div id="options-container">
                        {{-- Ini akan diisi oleh JavaScript --}}
                    </div>
                    
                    <div class="form-group mt-4">
                        <label>Bobot Nilai <span class="text-danger">*</span></label>
                        <input type="number" name="score" value="1" min="1" class="form-control" style="width: 100px;" required>
                        @error('score') <small class="text-danger d-block mt-1">{{ $message }}</small> @enderror
                    </div>
                </div>
                <div class="card-footer text-right">
                    <button type="submit" class="btn btn-success"><i class="fas fa-save"></i> Simpan Soal</button>
                </div>
            </form>
        </div>
    </div>

    <!-- LIST SOAL (KANAN) -->
    <div class="col-md-5">
        <div class="card card-outline card-warning">
            <div class="card-header">
                <h3 class="card-title">Daftar Soal ({{ $exam->questions->count() }})</h3>
            </div>
            <div class="card-body p-0" style="max-height: 600px; overflow-y: auto;">
                @forelse($exam->questions as $key => $q)
                    <div class="callout callout-{{ $q->question_type === 'essay' ? 'info' : 'primary' }} m-2 position-relative">
                        <!-- Tombol Hapus -->
                        <form action="{{ route('elearning.ujian.soal.destroy', [$exam->id, $q->id]) }}" method="POST" class="position-absolute" style="top: 10px; right: 10px;">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-xs btn-danger" onclick="return confirm('Hapus soal ini?')"><i class="fas fa-times"></i></button>
                        </form>

                        <h5>
                            Soal No. {{ $key + 1 }} 
                            <span class="badge badge-secondary">{{ $q->score }} Poin</span>
                            @if($q->question_type === 'essay')
                                <span class="badge badge-info">ESAI</span>
                            @endif
                        </h5>
                        {{-- Render Area MathJax --}}
                        <div class="mb-2 mathjax-render-area">{!! $q->question_text !!}</div>
                        
                        @if($q->question_type === 'multiple_choice')
                        <ul class="list-unstyled small">
                            @foreach($q->options as $opt)
                                <li class="{{ $opt->is_correct ? 'text-success font-weight-bold' : 'text-muted' }} mathjax-render-area">
                                    @if($opt->is_correct) <i class="fas fa-check"></i> @else <i class="far fa-circle"></i> @endif
                                    {!! $opt->option_text !!}
                                </li>
                            @endforeach
                        </ul>
                        @endif
                    </div>
                @empty
                    <div class="p-4 text-center text-muted">Belum ada soal.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<!-- MODAL EDITOR RUMUS MATEMATIKA KHUSUS -->
<div class="modal fade" id="mathFormulaModal" tabindex="-1" role="dialog" aria-labelledby="mathFormulaModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" style="border-radius: 15px;">
            <div class="modal-header bg-primary text-white" style="border-radius: 15px 15px 0 0;">
                <h5 class="modal-title" id="mathFormulaModalLabel"><i class="fas fa-calculator mr-2"></i> Math Formula Editor (LaTeX)</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info small">
                    Masukkan kode LaTeX di bawah atau pilih template cepat. Rumus akan otomatis dikonversi.
                </div>
                
                <div class="form-group">
                    <label for="latex-input">Kode LaTeX</label>
                    <textarea id="latex-input" class="form-control" rows="3" placeholder="Contoh: \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}"></textarea>
                </div>
                
                <div class="form-group">
                    <label>Preview Formula</label>
                    <div id="latex-preview" class="p-3 border rounded bg-light mathjax-render-area" style="min-height: 60px; font-size: 1.5em; text-align: center; display: flex; align-items: center; justify-content: center;">
                        <!-- Rumus akan di-render di sini -->
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <label class="d-block">Template Cepat</label>
                        <div class="btn-group-sm mb-2" role="group">
                            <button type="button" class="btn btn-outline-secondary btn-sm mb-1" onclick="insertLatexTemplate('\\frac{a}{b}')"><i class="fas fa-divide"></i> Pecahan</button>
                            <button type="button" class="btn btn-outline-secondary btn-sm mb-1" onclick="insertLatexTemplate('\\sqrt{x}')">√ Akar</button>
                            <button type="button" class="btn btn-outline-secondary btn-sm mb-1" onclick="insertLatexTemplate('x^{2}')">x² Pangkat</button>
                            <button type="button" class="btn btn-outline-secondary btn-sm mb-1" onclick="insertLatexTemplate('\\int_{a}^{b} f(x) dx')">∫ Integral</button>
                            <button type="button" class="btn btn-outline-secondary btn-sm mb-1" onclick="insertLatexTemplate('\\sum_{i=1}^{n} i')">∑ Sigma</button>
                            <button type="button" class="btn btn-outline-secondary btn-sm mb-1" onclick="insertLatexTemplate('\\lim_{x \\to \\infty}')">lim Limit</button>
                             <button type="button" class="btn btn-outline-secondary btn-sm mb-1" onclick="insertLatexTemplate('\\alpha \\beta \\gamma')">α β γ</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                <button type="button" class="btn btn-primary" id="insert-latex-btn"><i class="fas fa-check mr-1"></i> Sisipkan ke Soal</button>
            </div>
        </div>
    </div>
</div>

@stop

{{-- 1. Load MathJax CDN untuk Rendering --}}

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

@section('js')
<script>
    // Templates input dinamis
    const pgOptionsTemplate = `
        <div class="form-group" id="pg-options">
            <label>Pilihan Jawaban <span class="text-danger">*</span></label>
            <small class="text-muted d-block mb-2">* Pilih radio button untuk menentukan kunci jawaban.</small>
            
            <div class="input-group mb-2">
                <div class="input-group-prepend"><div class="input-group-text"><input type="radio" name="correct_option" value="0" required> A</div></div>
                <input type="text" name="options[]" class="form-control" placeholder="Opsi A (Gunakan $$ untuk rumus)" required>
            </div>

            <div class="input-group mb-2">
                <div class="input-group-prepend"><div class="input-group-text"><input type="radio" name="correct_option" value="1"> B</div></div>
                <input type="text" name="options[]" class="form-control" placeholder="Opsi B" required>
            </div>

            <div class="input-group mb-2">
                <div class="input-group-prepend"><div class="input-group-text"><input type="radio" name="correct_option" value="2"> C</div></div>
                <input type="text" name="options[]" class="form-control" placeholder="Opsi C" required>
            </div>

            <div class="input-group mb-2">
                <div class="input-group-prepend"><div class="input-group-text"><input type="radio" name="correct_option" value="3"> D</div></div>
                <input type="text" name="options[]" class="form-control" placeholder="Opsi D" required>
            </div>
            
            <div class="input-group mb-2">
                <div class="input-group-prepend"><div class="input-group-text"><input type="radio" name="correct_option" value="4"> E</div></div>
                <input type="text" name="options[]" class="form-control" placeholder="Opsi E (Opsional)">
            </div>
            @error('options') <small class="text-danger d-block mt-1">Minimal 2 opsi harus diisi.</small> @enderror
        </div>
    `;

    const essayTemplate = `
        <div class="form-group" id="essay-info">
            <div class="alert alert-warning small">
                <i class="fas fa-info-circle mr-1"></i> Penilaian soal esai dilakukan **manual** setelah siswa selesai ujian.
            </div>
        </div>
    `;

    function updateQuestionType(type) {
        const container = $('#options-container');
        container.empty();

        if (type === 'multiple_choice') {
            container.html(pgOptionsTemplate);
        } else if (type === 'essay') {
            container.html(essayTemplate);
        }
    }

    // --- LOGIC MATEMATIKA ---

    // Render ulang semua rumus di halaman
    function renderAllMath() {
        if (typeof MathJax !== 'undefined') {
            MathJax.typesetPromise().catch((err) => console.error(err));
        }
    }

    // Render preview di modal
    function renderPreview() {
        let latex = $('#latex-input').val();
        let preview = $('#latex-preview');
        // Bungkus dengan $$ agar MathJax merender sebagai display math
        preview.html('$$' + latex + '$$');
        
        // Panggil MathJax khusus untuk elemen preview
        if (typeof MathJax !== 'undefined') {
            MathJax.typesetPromise([document.querySelector('#latex-preview')]).catch((err) => console.error(err));
        }
    }

    // Masukkan template ke input
    window.insertLatexTemplate = function(template) {
        let input = $('#latex-input');
        input.val(template);
        renderPreview();
    };

    $(function () {
        // 1. Konfigurasi MathJax Global
        window.MathJax = {
            tex: {
                inlineMath: [['$', '$'], ['\\(', '\\)']],
                displayMath: [['$$', '$$'], ['\\[', '\\]']],
            },
            options: {
                ignoreHtmlClass: 'note-editable', // Jangan render saat edit di summernote
                processHtmlClass: 'mathjax-render-area' // Render di area ini
            },
            startup: {
                ready: function() {
                    MathJax.startup.defaultReady();
                    renderAllMath();
                }
            }
        };

        // 2. Definisi Tombol Math untuk Summernote
        var MathButton = function (context) {
            var ui = $.summernote.ui;
            var button = ui.button({
                contents: '<i class="fas fa-calculator"/> Math',
                tooltip: 'Sisipkan Rumus Matematika',
                click: function () {
                    // Simpan posisi kursor editor saat ini agar tidak hilang
                    context.invoke('editor.saveRange');
                    
                    // Reset modal dan tampilkan
                    $('#latex-input').val('');
                    $('#latex-preview').html('');
                    $('#mathFormulaModal').modal('show');
                }
            });
            return button.render();
        }

        // 3. Inisialisasi Summernote
        $('.summernote').summernote({
            height: 150,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['para', ['ul', 'ol']],
                ['insert', ['link', 'picture']],
                ['custom', ['math']], // Tombol custom kita
                ['view', ['codeview']]
            ],
            buttons: {
                math: MathButton
            },
            callbacks: {
                onInit: function() {
                    renderAllMath();
                }
            }
        });

        // 4. Event Listeners
        $('input[name="question_type"]').on('change', function() {
            updateQuestionType($(this).val());
        });
        updateQuestionType($('input[name="question_type"]:checked').val());

        $('#latex-input').on('input', renderPreview);

        // [FIXED] Tombol Sisipkan
        $('#insert-latex-btn').on('click', function() {
            let latex = $('#latex-input').val();
            if (latex.trim() === '') {
                $('#mathFormulaModal').modal('hide');
                return;
            }
            
            // Format LaTeX untuk Summernote (gunakan $$)
            let formulaHtml = '$$' + latex + '$$';

            // Kembalikan fokus ke editor dan paste HTML
            $('.summernote').summernote('restoreRange');
            $('.summernote').summernote('focus');
            $('.summernote').summernote('pasteHTML', formulaHtml);

            $('#mathFormulaModal').modal('hide');
        });
    });
</script>
@stop