<?php $__env->startSection('content'); ?>
<style>
    /* --- CUSTOM CSS AI CHAT --- */
    /* Warna mewarisi variabel global dari app.blade.php */
    
    .ai-chat-wrapper {
        height: 75vh;
        min-height: 500px;
        display: flex;
        background-color: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }
    
    .ai-main-chat {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: transparent;
        position: relative;
        width: 100%;
    }

    .ai-chat-header {
        padding: 15px 24px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--hover-bg);
    }

    .ai-chat-box {
        flex: 1;
        overflow-y: auto;
        padding: 24px 30px;
        display: flex;
        flex-direction: column;
        scroll-behavior: smooth;
        background-color: transparent;
    }

    /* Custom Scrollbar untuk Chat Box */
    .ai-chat-box::-webkit-scrollbar { width: 6px; }
    .ai-chat-box::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }

    /* --- BUBBLE CHAT OVERRIDES --- */
    .ai-message {
        margin-bottom: 24px;
        display: flex;
        flex-direction: column;
        max-width: 85%;
        animation: fadeIn 0.3s ease-in-out;
    }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    .ai-message.user { align-self: flex-end; align-items: flex-end; }
    .ai-message.ai { align-self: flex-start; align-items: flex-start; }

    .ai-message .bubble {
        padding: 14px 18px;
        border-radius: 18px;
        line-height: 1.6;
        font-size: 0.95rem;
        position: relative;
        word-wrap: break-word;
        box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    }

    /* Bubble User (Anda) - Tetap biru primer agar kontras */
    .ai-message.user .bubble {
        background-color: var(--primary-color);
        color: #ffffff; 
        border-bottom-right-radius: 4px;
    }

    /* Bubble AI (Asisten) - Otomatis adaptif Light/Dark mode */
    .ai-message.ai .bubble {
        background-color: var(--hover-bg); 
        color: var(--text-main); 
        border: 1px solid var(--border-color);
        border-bottom-left-radius: 4px;
    }

    .ai-message .sender-name {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-bottom: 6px;
        margin-left: 8px;
        margin-right: 8px;
        font-weight: 600;
    }

    /* --- INPUT AREA OVERRIDES --- */
    .ai-input-area {
        padding: 18px 24px;
        border-top: 1px solid var(--border-color);
        background-color: var(--bg-card);
    }

    .ai-input-group {
        position: relative;
        border: 1px solid var(--border-color);
        border-radius: 24px;
        padding: 6px 6px 6px 20px;
        display: flex;
        align-items: flex-end;
        background-color: var(--hover-bg); 
        transition: all 0.3s ease;
    }
    
    .ai-input-group:focus-within {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
    }

    textarea#inputPrompt {
        border: none;
        resize: none;
        box-shadow: none;
        background: transparent;
        padding: 12px 0;
        max-height: 150px;
        width: 100%;
        line-height: 1.5;
        color: var(--text-main);
    }
    textarea#inputPrompt:focus { outline: none; }
    textarea#inputPrompt::placeholder { color: var(--text-muted); opacity: 0.7; }

    /* Tombol Kirim */
    .ai-btn-send {
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 50%;
        width: 45px;
        height: 45px;
        min-width: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 12px;
        margin-bottom: 2px;
        transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .ai-btn-send:hover { 
        transform: scale(1.08) rotate(-10deg); 
        box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4); 
    }

    /* Typing Indicator */
    .ai-typing {
        display: none;
        padding: 10px 30px;
        color: var(--text-muted);
        font-style: italic;
        font-size: 0.85rem;
    }

    @media (max-width: 768px) {
        .ai-chat-wrapper { height: 80vh; border-radius: 16px; }
        .ai-chat-box { padding: 15px; }
    }
</style>

<div class="container-fluid">
    <div class="d-flex align-items-center justify-content-between mb-4">
        <h3 class="mb-0 fw-bold">Asisten Pembelajaran</h3>
    </div>

    <div class="ai-chat-wrapper">
        <div class="ai-main-chat">
            <div class="ai-chat-header">
                <div class="d-flex flex-column">
                    <span class="fw-bold fs-5" id="chatTitle"><i class="bi bi-robot me-2 text-primary"></i>Diskusi Materi</span>
                    <small class="text-muted fw-medium" style="font-size: 12px;">Didukung oleh Groq AI</small>
                </div>
                
                <div>
                    <button class="btn btn-sm btn-outline-danger rounded-pill px-3" onclick="resetChat()" title="Reset Percakapan">
                        <i class="bi bi-trash me-1"></i> <span class="d-none d-sm-inline">Reset Chat</span>
                    </button>
                </div>
            </div>

            <div id="chatBox" class="ai-chat-box">
                <div class="text-center mt-5" id="emptyState">
                    <div class="opacity-50 mb-3"><i class="bi bi-chat-square-dots text-primary" style="font-size: 4rem;"></i></div>
                    <h5 class="fw-bold">Halo Guru!</h5>
                    <p class="small text-muted">Silakan mulai diskusi materi atau modul ajar dengan Asisten AI.</p>
                </div>
            </div>

            <div id="typingIndicator" class="ai-typing">
                <span class="spinner-grow spinner-grow-sm text-primary me-2" role="status" aria-hidden="true"></span>
                <span class="fw-medium">AI sedang berpikir...</span>
            </div>

            <div class="ai-input-area">
                <div class="ai-input-group">
                    <textarea id="inputPrompt" rows="1" placeholder="Ketik pesan Anda di sini... (Enter untuk kirim)"></textarea>
                    <button class="ai-btn-send shadow-sm" onclick="sendPrompt()" id="btnSend">
                        <i class="bi bi-send-fill"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    let conversationContext = []; 

    document.addEventListener("DOMContentLoaded", function() {
        const tx = document.getElementById('inputPrompt');
        tx.addEventListener("input", function(){
            this.style.height = "auto";
            this.style.height = (this.scrollHeight) + "px";
            if(this.value === '') this.style.height = "auto";
        });
    });

    function resetChat() {
        if(confirm('Mulai percakapan baru? Chat saat ini akan dihapus.')) {
            conversationContext = [];
            
            document.getElementById('chatBox').innerHTML = `
                <div class="text-center mt-5" id="emptyState">
                    <div class="opacity-50 mb-3"><i class="bi bi-chat-square-dots text-primary" style="font-size: 4rem;"></i></div>
                    <h5 class="fw-bold">Halo Guru!</h5>
                    <p class="small text-muted">Silakan mulai diskusi materi atau modul ajar dengan Asisten AI.</p>
                </div>
            `;
            document.getElementById('inputPrompt').value = '';
            document.getElementById('inputPrompt').focus();
        }
    }

    function sendPrompt() {
        let input = document.getElementById('inputPrompt');
        let message = input.value.trim();
        if (!message) return;

        const emptyState = document.getElementById('emptyState');
        if (emptyState) emptyState.remove();

        appendMessage('user', message);
        input.value = '';
        input.style.height = 'auto';

        document.getElementById('typingIndicator').style.display = 'block';
        scrollToBottom();

        fetch("<?php echo e(route('bahanajar.ask')); ?>", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "<?php echo e(csrf_token()); ?>"
            },
            body: JSON.stringify({
                prompt: message,
                type: 'general',
                history: conversationContext
            })
        })
        .then(response => response.json())
        .then(data => {
            document.getElementById('typingIndicator').style.display = 'none';
            
            if (data.status === 'success') {
                appendMessage('ai', data.answer);
                conversationContext.push({ role: "user", content: message });
                conversationContext.push({ role: "assistant", content: data.raw_answer });
            } else {
                appendMessage('ai', '<span class="text-danger fw-bold"><i class="bi bi-exclamation-circle me-1"></i> Error: ' + data.message + '</span>');
            }
        })
        .catch(error => {
            console.error(error);
            document.getElementById('typingIndicator').style.display = 'none';
            appendMessage('ai', '<span class="text-danger fw-bold"><i class="bi bi-exclamation-circle me-1"></i> Terjadi kesalahan koneksi.</span>');
        });
    }

    function appendMessage(sender, htmlContent) {
        let chatBox = document.getElementById('chatBox');
        let div = document.createElement('div');
        div.classList.add('ai-message', sender);
        
        let senderName = sender === 'user' ? 'Anda' : 'Asisten AI';
        
        div.innerHTML = `
            <div class="sender-name">${senderName}</div>
            <div class="bubble">${htmlContent}</div>
        `;
        chatBox.appendChild(div);
        scrollToBottom();
    }

    function scrollToBottom() {
        let chatBox = document.getElementById('chatBox');
        chatBox.scrollTop = chatBox.scrollHeight;
    }

    document.getElementById('inputPrompt').addEventListener("keydown", function(event) {
        if (event.key === "Enter" && !event.shiftKey) {
            event.preventDefault();
            sendPrompt();
        }
    });
</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/pembelajaran/bahanajar/index.blade.php ENDPATH**/ ?>