{% load static %}
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">

<!-- User Info -->
<div id="user-info" data-username="{{ request.user.first_name|default:'User' }}"
    data-gender="{{ request.user.gender|default_if_none:'female' }}"></div>

<div id="user-img" data-image="{{ image_url }}"></div>
<div id="static-path" data-path="{% static 'assets/images/common/user_image/' %}"></div>

<!-- Chatbot Toggle Button -->
<div class="position-fixed bottom-4 end-0 m-6 my-1 d-flex flex-column align-items-end" style="z-index: 1050;">
    <div id="chatbot-greeting"
        class="text-light px-2 py-1 rounded-pill shadow-sm mb-2 position-relative d-inline-block chatbot-bubble"
        style="background-color: rgb(0, 0, 0);">
        <span id="greeting-text">Good Day 👋</span>
        <div class="chatbot-triangle"></div>
    </div>
    <button id="chatbotToggle" class="btn rounded-circle d-flex align-items-center justify-content-center shadow-sm"
        style="width: 90px; height: 90px; background: #023363; padding: 0; overflow: hidden;"
        aria-label="Toggle chatbot">
        <img src="{% static 'assets/images/avatars/cbgif.gif' %}" alt="Chatbot Icon"
            style="object-fit: fill; height: 70px;">
    </button>
</div>

<!-- Chat Overlay -->
<div id="chatOverlay" class="position-fixed top-0 start-0 w-100 h-100 d-none"
    style="background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 1055;">
</div>

<!-- Chatbot Dialog -->
<div id="chatDialog" class="card position-fixed bottom-0 end-0 m-3 shadow d-none"
    style="width: 100%; max-width: 400px; height: 90vh; z-index: 1060; overflow: hidden; border-radius: 1rem;">

    <!-- Header -->
    <div class="chatbot-header d-flex justify-content-between align-items-center p-2 bg-primary text-white">
        <div class="d-flex align-items-center">
            <img src="{% static 'assets/images/avatars/cb2.png' %}" alt="Chatbot Icon" class="rounded-circle me-2"
                width="40" height="40">
            <div>
                <strong>Savvy GT</strong><br>
                <small>Powered by AI, driven by your needs.</small>
            </div>
        </div>
        <button type="button" class="btn-close btn-close-white" id="chatCloseBtn" aria-label="Close"></button>
    </div>

    <!-- Chat Messages -->
    <div class="card-body d-flex flex-column gap-2 px-3" id="chatMessages"
        style="flex-grow: 1; overflow-y: auto; background-color: #f8f9fa;"></div>

    <!-- Replies -->
    <div id="chat-replies"></div>

    <!-- Input -->
    <div class="card-footer p-2 d-flex gap-2 align-items-center">
        <input type="text" class="form-control" id="chatInput" placeholder="Type your message..." />
        <button class="btn btn-primary" onclick="handleUserInput()">Send</button>
    </div>

    <!-- Feedback Section -->
    <div id="feedback-form" class="p-3 border-top bg-light d-none">
        <h6 class="text-center mb-2">How was your experience?</h6>
        <div class="text-center mb-2" id="starRating">
            <span class="star fs-4" data-value="1">☆</span>
            <span class="star fs-4" data-value="2">☆</span>
            <span class="star fs-4" data-value="3">☆</span>
            <span class="star fs-4" data-value="4">☆</span>
            <span class="star fs-4" data-value="5">☆</span>
        </div>
        <textarea class="form-control mb-2" id="chatFeedback" rows="2" placeholder="Any comments?"></textarea>
        <button class="btn btn-success w-100" onclick="submitFeedback()">Submit</button>
    </div>
</div>

<!-- Video Panel (Optional) -->
<div id="videoPanel" class="position-fixed shadow d-none top-50 start-50 translate-middle"
    style="width: 600px; height: 400px; z-index: 1060; overflow: hidden; border-radius: 0.5rem; background: #000;">
    <iframe id="videoIframe" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media"
        allowfullscreen style="border-radius: 1rem;"></iframe>
    <button class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1" id="closeVideoBtn">×</button>
</div>

<!-- ✅ Add this script at the end -->
<script>
    // Save chat history before page unload
    window.addEventListener("beforeunload", () => {
        const chatBox = document.getElementById("chatMessages");
        if (chatBox) {
            sessionStorage.setItem("chat-history", chatBox.innerHTML);
        }
    });

    // Restore chat history after page reload
    window.addEventListener("DOMContentLoaded", () => {
        const chatBox = document.getElementById("chatMessages");
        const history = sessionStorage.getItem("chat-history");
        if (chatBox && history) {
            chatBox.innerHTML = history;
            chatBox.scrollTop = chatBox.scrollHeight;
        }
    });

    // Optional: Toggle logic
    document.getElementById("chatbotToggle").addEventListener("click", function () {
        document.getElementById("chatDialog").classList.remove("d-none");
        document.getElementById("chatOverlay").classList.remove("d-none");
    });

    document.getElementById("chatCloseBtn").addEventListener("click", function () {
        document.getElementById("chatDialog").classList.add("d-none");
        document.getElementById("chatOverlay").classList.add("d-none");
    });
</script>