{% extends "dashboard/base.html" %}
{% load static %}

{% block content %}
<turbo-frame id="main">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <!-- Mobile Filter Button -->
    <div class="lg:hidden mb-6">
        <button @click="filterOpen = true" class="w-full bg-gradient-to-r from-primary-600 to-primary-700 dark:from-primary-500 dark:to-primary-600 text-white py-3 px-4 rounded-lg flex items-center justify-center shadow-md hover:shadow-lg transition-all duration-200 font-medium dark:hover:from-primary-600 dark:hover:to-primary-700">
            <i class="fas fa-filter mr-2"></i>
            Filter
        </button>
    </div>

    <div class="flex flex-col lg:flex-row gap-6">
        <!-- Main Content Column -->
        <div class="lg:w-3/4" x-data="{ postOpen: false }">
            <!-- Create Post Card -->
            <div class="bg-white dark:bg-slate-800 rounded-xl shadow-md p-6 mb-6 border border-gray-200 dark:border-slate-700">
                <div class="flex items-center space-x-3 mb-4">
                    {% if request.user.profile_picture %}
                    <img class="h-10 w-10 rounded-full object-cover" src="{{ request.user.profile_picture.url }}" alt="{{ request.user.username }}">
                    {% else %}
                    <div class="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center">
                        <i class="fas fa-user text-gray-500"></i>
                    </div>
                    {% endif %}
                    <div class="flex-1">
                        <button @click="postOpen = true" class="w-full text-left bg-gray-50 dark:bg-slate-700 hover:bg-gray-100 dark:hover:bg-slate-600 rounded-full px-4 py-2 text-gray-500 dark:text-gray-400 transition-colors">
                            Share your question...
                        </button>
                    </div>
                </div>
            </div>

            <!-- Doubts Feed -->
            <div class="space-y-5" id="doubts-container">
                {% for doubt in doubts %}
                <div class="bg-white dark:bg-slate-800 rounded-xl shadow-md overflow-hidden border border-gray-200 dark:border-slate-700" 
                     x-data="{ 
                         commentOpen: false, 
                         liked: {% if request.user in doubt.likes.all %}true{% else %}false{% endif %}, 
                         bookmarked: {% if request.user in doubt.bookmarks.all %}true{% else %}false{% endif %} 
                     }">
                    <div class="p-4 border-b border-gray-200 dark:border-slate-700">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                {% if doubt.user.profile_picture %}
                                <img class="h-9 w-9 rounded-full object-cover" src="{{ doubt.user.profile_picture.url }}" alt="{{ doubt.user.username }}">
                                {% else %}
                                <div class="h-9 w-9 rounded-full bg-gray-300 dark:bg-slate-600 flex items-center justify-center">
                                    <i class="fas fa-user text-gray-600 dark:text-gray-400 text-sm"></i>
                                </div>
                                {% endif %}
                                <div>
                                    <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ doubt.user.username }}</h4>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ doubt.created_at|timesince }} ago</p>
                                </div>
                            </div>
                            <button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300">
                                <i class="fas fa-ellipsis-h"></i>
                            </button>
                        </div>
                    </div>

                    <div class="p-4">
                        <div class="flex flex-wrap gap-2 mb-3">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200">
                                {{ doubt.class_level.name }}
                            </span>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                {{ doubt.subject.name }}
                            </span>
                            {% if doubt.chapter %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                {{ doubt.chapter.title }}
                            </span>
                            {% endif %}
                        </div>
                        
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">{{ doubt.title }}</h3>
                        
                        {% if doubt.content %}
                        <p class="text-gray-800 dark:text-gray-300 mb-3 whitespace-pre-line">{{ doubt.content }}</p>
                        {% endif %}
                        
                        {% if doubt.post_type == 'image' %}
                            {% for image in doubt.images.all %}
                            <div class="mb-3 rounded-lg overflow-hidden border border-gray-300 dark:border-slate-600">
                                <img src="{{ image.image.url }}" alt="Doubt image" class="w-full h-auto object-cover">
                                {% if image.caption %}
                                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ image.caption }}</p>
                                {% endif %}
                            </div>
                            {% endfor %}
                        {% elif doubt.post_type == 'document' %}
                            {% for doc in doubt.documents.all %}
                            <div class="mb-3">
                                <a href="{{ doc.document.url }}" download class="inline-flex items-center px-3 py-1.5 border border-gray-300 dark:border-slate-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-slate-700 hover:bg-gray-50 dark:hover:bg-slate-600">
                                    <i class="fas fa-download mr-2"></i> Download Document
                                </a>
                                {% if doc.description %}
                                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ doc.description }}</p>
                                {% endif %}
                            </div>
                            {% endfor %}
                        {% elif doubt.post_type == 'link' %}
                            {% for link in doubt.links.all %}
                            <div class="mb-3">
                                <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer" class="text-primary-600 dark:text-primary-400 hover:underline inline-flex items-center">
                                    <i class="fas fa-external-link-alt mr-2"></i> {{ link.description|default:"Attached Link" }}
                                </a>
                            </div>
                            {% endfor %}
                        {% endif %}
                    </div>

                    <div class="bg-gray-50 dark:bg-slate-700 px-4 py-2 flex items-center justify-between border-t border-gray-200 dark:border-slate-600">
                        <button @click="likeDoubt('{{ doubt.id }}')"
                                class="flex items-center space-x-1 text-gray-500 dark:text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors">
                            <i class="far fa-heart" :class="{ 'fas text-red-500': liked }"></i>
                            <span id="like-count-{{ doubt.id }}" class="text-sm">{{ doubt.likes.count }}</span>
                        </button>
                        <button @click="commentOpen = !commentOpen; if(commentOpen) loadComments('{{ doubt.id }}')"
                                class="flex items-center space-x-1 text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors">
                            <i class="far fa-comment"></i>
                            <span class="text-sm">{{ doubt.comments.count }}</span>
                        </button>
                        <button @click="bookmarkDoubt('{{ doubt.id }}')"
                                class="flex items-center space-x-1 text-gray-500 dark:text-gray-400 hover:text-yellow-500 dark:hover:text-yellow-400 transition-colors">
                            <i class="far fa-bookmark" :class="{ 'fas text-yellow-500': bookmarked }"></i>
                            <span class="text-sm">{{ doubt.bookmarks.count }}</span>
                        </button>
                    </div>

                    <div x-show="commentOpen" x-cloak class="bg-gray-50 dark:bg-slate-700 p-4 border-t border-gray-200 dark:border-slate-600">
                        <div id="comments-{{ doubt.id }}" class="space-y-3 mb-3 max-h-60 overflow-y-auto">
                            {% for comment in doubt.comments.all|slice:":3" %}
                            <div class="flex gap-3">
                                {% if comment.user.profile_picture %}
                                <img class="h-8 w-8 rounded-full object-cover" src="{{ comment.user.profile_picture.url }}" alt="{{ comment.user.username }}">
                                {% else %}
                                <div class="h-8 w-8 rounded-full bg-gray-300 dark:bg-slate-600 flex items-center justify-center">
                                    <i class="fas fa-user text-gray-600 dark:text-gray-400 text-xs"></i>
                                </div>
                                {% endif %}
                                <div class="flex-1 bg-white dark:bg-slate-800 p-3 rounded-lg">
                                    <div class="flex justify-between items-start">
                                        <span class="font-semibold text-sm text-gray-900 dark:text-gray-100">{{ comment.user.username }}</span>
                                        <span class="text-xs text-gray-500 dark:text-gray-400">{{ comment.created_at|timesince }} ago</span>
                                    </div>
                                    <p class="text-sm mt-1 text-gray-800 dark:text-gray-300">{{ comment.content }}</p>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        
                        <form @submit.prevent="postComment($event, '{{ doubt.id }}')" class="flex items-center space-x-2">
                            {% if request.user.profile_picture %}
                            <img class="h-8 w-8 rounded-full object-cover" src="{{ request.user.profile_picture.url }}" alt="{{ request.user.username }}">
                            {% else %}
                            <div class="h-8 w-8 rounded-full bg-gray-300 dark:bg-slate-600 flex items-center justify-center">
                                <i class="fas fa-user text-gray-600 dark:text-gray-400 text-xs"></i>
                            </div>
                            {% endif %}
                            <input type="text" name="content" placeholder="Write a comment..."
                                   class="flex-1 px-3 py-2 border border-gray-300 dark:border-slate-600 dark:bg-slate-800 dark:text-gray-100 rounded-full focus:outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500 sm:text-sm">
                            <button type="submit" class="p-2 text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </form>
                    </div>
                </div>
                {% empty %}
                <div class="bg-white dark:bg-slate-800 rounded-xl shadow-md p-6 text-center border border-gray-200 dark:border-slate-700">
                    <div class="mx-auto h-24 w-24 text-gray-400 dark:text-gray-600 mb-4">
                        <i class="fas fa-question-circle text-5xl"></i>
                    </div>
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">No questions found</h3>
                    <p class="text-gray-500 dark:text-gray-400">Be the first one to ask a question!</p>
                    <button @click="postOpen = true" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary-600 dark:bg-primary-600 hover:bg-primary-700 dark:hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-slate-900">
                        <i class="fas fa-plus mr-2"></i> Ask a Question
                    </button>
                </div>
                {% endfor %}
            </div>

            <!-- Pagination -->
            {% if doubts.has_other_pages %}
            <div class="mt-8 flex justify-center">
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                    {% if doubts.has_previous %}
                    <a href="?page={{ doubts.previous_page_number }}{% if current_filters.class %}&class={{ current_filters.class }}{% endif %}{% if current_filters.subject %}&subject={{ current_filters.subject }}{% endif %}{% if current_filters.chapter %}&chapter={{ current_filters.chapter }}{% endif %}{% if current_filters.sort %}&sort={{ current_filters.sort }}{% endif %}" 
                       class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-slate-700">
                        <span class="sr-only">Previous</span>
                        <i class="fas fa-chevron-left"></i>
                    </a>
                    {% endif %}

                    {% for num in doubts.paginator.page_range %}
                    {% if doubts.number == num %}
                    <a href="?page={{ num }}{% if current_filters.class %}&class={{ current_filters.class }}{% endif %}{% if current_filters.subject %}&subject={{ current_filters.subject }}{% endif %}{% if current_filters.chapter %}&chapter={{ current_filters.chapter }}{% endif %}{% if current_filters.sort %}&sort={{ current_filters.sort }}{% endif %}" 
                       aria-current="page" class="z-10 bg-primary-50 dark:bg-primary-900 border-primary-500 text-primary-600 dark:text-primary-400 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        {{ num }}
                    </a>
                    {% else %}
                    <a href="?page={{ num }}{% if current_filters.class %}&class={{ current_filters.class }}{% endif %}{% if current_filters.subject %}&subject={{ current_filters.subject }}{% endif %}{% if current_filters.chapter %}&chapter={{ current_filters.chapter }}{% endif %}{% if current_filters.sort %}&sort={{ current_filters.sort }}{% endif %}" 
                       class="bg-white dark:bg-slate-800 border-gray-300 dark:border-slate-600 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-slate-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                        {{ num }}
                    </a>
                    {% endif %}
                    {% endfor %}

                    {% if doubts.has_next %}
                    <a href="?page={{ doubts.next_page_number }}{% if current_filters.class %}&class={{ current_filters.class }}{% endif %}{% if current_filters.subject %}&subject={{ current_filters.subject }}{% endif %}{% if current_filters.chapter %}&chapter={{ current_filters.chapter }}{% endif %}{% if current_filters.sort %}&sort={{ current_filters.sort }}{% endif %}" 
                       class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-slate-700">
                        <span class="sr-only">Next</span>
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    {% endif %}
                </nav>
            </div>
            {% endif %}

            <!-- Create Post Modal -->
            <div class="fixed inset-0 overflow-y-auto z-50" x-show="postOpen" x-cloak>
                <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                    <div class="fixed inset-0 transition-opacity" aria-hidden="true" @click="postOpen = false">
                        <div class="absolute inset-0 bg-black opacity-40 dark:opacity-60"></div>
                    </div>
                    
                    <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
                    
                    <div class="inline-block align-bottom bg-white dark:bg-slate-800 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
                        <!-- Modal Header -->
                        <div class="border-b border-gray-200 dark:border-slate-700 px-6 py-4 flex items-center justify-between bg-gradient-to-r from-primary-50 dark:from-slate-800 to-white dark:to-slate-800">
                            <div>
                                <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Ask a Question</h3>
                                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Share your doubt with the community</p>
                            </div>
                            <button @click="postOpen = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
                                <i class="fas fa-times text-2xl"></i>
                            </button>
                        </div>
                        
                        <!-- Modal Body -->
                        <div class="px-6 py-6">
                            <form id="post-doubt-form" enctype="multipart/form-data">
                                {% csrf_token %}
                                
                                <!-- Content Section (Facebook-like) -->
                                <div class="mb-6 pb-6 border-b border-gray-200 dark:border-slate-700">
                                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Your Question</label>
                                    <input type="text" name="title" placeholder="What's your question?" 
                                           class="w-full px-4 py-3 text-lg border-2 border-gray-200 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 dark:placeholder-gray-500 rounded-xl focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-900 transition-all placeholder-gray-400" required>
                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">Be specific and clear to get better answers</p>
                                </div>
                                
                                <!-- Description Section -->
                                <div class="mb-6 pb-6 border-b border-gray-200 dark:border-slate-700">
                                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Details (Optional)</label>
                                    <textarea name="content" rows="4" placeholder="Provide more context or details..."
                                              class="w-full px-4 py-3 border-2 border-gray-200 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 dark:placeholder-gray-500 rounded-xl focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-900 transition-all placeholder-gray-400 resize-none"></textarea>
                                </div>
                                
                                <!-- Category Section -->
                                <div class="grid grid-cols-3 gap-4 mb-6 pb-6 border-b border-gray-200 dark:border-slate-700">
                                    <!-- Class Select -->
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Class</label>
                                        <select name="class_level" id="class_level" onchange="updateSubjects()" 
                                                class="w-full px-3 py-2.5 border-2 border-gray-200 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 rounded-lg focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-900 transition-all cursor-pointer" required>
                                            <option value="">Select Class</option>
                                            {% for class_level in class_levels %}
                                            <option value="{{ class_level.id }}">{{ class_level.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    
                                    <!-- Subject Select -->
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Subject</label>
                                        <select name="subject" id="subject" onchange="updateChapters()" 
                                                class="w-full px-3 py-2.5 border-2 border-gray-200 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 rounded-lg focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-900 transition-all cursor-pointer" required disabled>
                                            <option value="">Select Subject</option>
                                        </select>
                                    </div>
                                    
                                    <!-- Chapter Select -->
                                    <div>
                                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Chapter</label>
                                        <select name="chapter" id="chapter" 
                                                class="w-full px-3 py-2.5 border-2 border-gray-200 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 rounded-lg focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-900 transition-all cursor-pointer" disabled>
                                            <option value="">Select Chapter</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <!-- Post Type Selection -->
                                <div class="mb-6 pb-6 border-b border-gray-200 dark:border-slate-700">
                                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">Add to your post</label>
                                    <div class="flex gap-3">
                                        <label class="flex items-center cursor-pointer group">
                                            <input type="radio" name="post_type" value="text" checked class="sr-only" onchange="toggleUploadSections()">
                                            <div class="flex items-center gap-2 px-4 py-2 border-2 border-gray-200 dark:border-slate-600 rounded-lg hover:border-primary-400 dark:hover:border-primary-500 transition-all group-has-[:checked]:border-primary-500 dark:group-has-[:checked]:border-primary-400 group-has-[:checked]:bg-primary-50 dark:group-has-[:checked]:bg-slate-700">
                                                <i class="fas fa-align-left text-gray-600 dark:text-gray-400 group-has-[:checked]:text-primary-600 dark:group-has-[:checked]:text-primary-400"></i>
                                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Text</span>
                                            </div>
                                        </label>
                                        <label class="flex items-center cursor-pointer group">
                                            <input type="radio" name="post_type" value="image" class="sr-only" onchange="toggleUploadSections()">
                                            <div class="flex items-center gap-2 px-4 py-2 border-2 border-gray-200 dark:border-slate-600 rounded-lg hover:border-primary-400 dark:hover:border-primary-500 transition-all group-has-[:checked]:border-primary-500 dark:group-has-[:checked]:border-primary-400 group-has-[:checked]:bg-primary-50 dark:group-has-[:checked]:bg-slate-700">
                                                <i class="fas fa-image text-gray-600 dark:text-gray-400 group-has-[:checked]:text-primary-600 dark:group-has-[:checked]:text-primary-400"></i>
                                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Image</span>
                                            </div>
                                        </label>
                                        <label class="flex items-center cursor-pointer group">
                                            <input type="radio" name="post_type" value="document" class="sr-only" onchange="toggleUploadSections()">
                                            <div class="flex items-center gap-2 px-4 py-2 border-2 border-gray-200 dark:border-slate-600 rounded-lg hover:border-primary-400 dark:hover:border-primary-500 transition-all group-has-[:checked]:border-primary-500 dark:group-has-[:checked]:border-primary-400 group-has-[:checked]:bg-primary-50 dark:group-has-[:checked]:bg-slate-700">
                                                <i class="fas fa-file text-gray-600 dark:text-gray-400 group-has-[:checked]:text-primary-600 dark:group-has-[:checked]:text-primary-400"></i>
                                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Document</span>
                                            </div>
                                        </label>
                                        <label class="flex items-center cursor-pointer group">
                                            <input type="radio" name="post_type" value="link" class="sr-only" onchange="toggleUploadSections()">
                                            <div class="flex items-center gap-2 px-4 py-2 border-2 border-gray-200 dark:border-slate-600 rounded-lg hover:border-primary-400 dark:hover:border-primary-500 transition-all group-has-[:checked]:border-primary-500 dark:group-has-[:checked]:border-primary-400 group-has-[:checked]:bg-primary-50 dark:group-has-[:checked]:bg-slate-700">
                                                <i class="fas fa-link text-gray-600 dark:text-gray-400 group-has-[:checked]:text-primary-600 dark:group-has-[:checked]:text-primary-400"></i>
                                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Link</span>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                
                                <!-- Image Upload Section -->
                                <div class="mb-6" id="image-upload-section" style="display: none;">
                                    <div class="border-2 border-dashed border-primary-300 dark:border-primary-700 rounded-xl p-6 text-center bg-primary-50 dark:bg-slate-700 hover:bg-primary-100 dark:hover:bg-slate-600 transition-colors cursor-pointer group">
                                        <input type="file" id="image_upload" name="images" multiple accept="image/*" class="sr-only" onchange="previewImages(this)">
                                        <label for="image_upload" class="cursor-pointer">
                                            <i class="fas fa-cloud-upload-alt text-4xl text-primary-400 dark:text-primary-500 mb-3"></i>
                                            <p class="text-lg font-semibold text-primary-700 dark:text-primary-300">Click to upload images</p>
                                            <p class="text-sm text-primary-600 dark:text-primary-400 mt-1">or drag and drop</p>
                                        </label>
                                    </div>
                                    <div id="image_preview" class="mt-4 grid grid-cols-3 gap-3"></div>
                                </div>
                                
                                <!-- Document Upload Section -->
                                <div class="mb-6" id="document-upload-section" style="display: none;">
                                    <div class="border-2 border-dashed border-primary-300 dark:border-primary-700 rounded-xl p-6 text-center bg-primary-50 dark:bg-slate-700 hover:bg-primary-100 dark:hover:bg-slate-600 transition-colors cursor-pointer">
                                        <input type="file" id="document_upload" name="documents" multiple accept=".pdf,.doc,.docx,.ppt,.pptx,.txt" class="sr-only" onchange="previewDocuments(this)">
                                        <label for="document_upload" class="cursor-pointer">
                                            <i class="fas fa-file-upload text-4xl text-primary-400 dark:text-primary-500 mb-3"></i>
                                            <p class="text-lg font-semibold text-primary-700 dark:text-primary-300">Click to upload documents</p>
                                            <p class="text-sm text-primary-600 dark:text-primary-400 mt-1">PDF, DOC, DOCX, PPT, or TXT files</p>
                                        </label>
                                    </div>
                                    <div id="document_preview" class="mt-4 space-y-2"></div>
                                </div>
                                
                                <!-- Link Section -->
                                <div class="mb-6" id="link-upload-section" style="display: none;">
                                    <div id="links-container" class="space-y-3 mb-3"></div>
                                    <button type="button" onclick="addLinkField()" class="w-full py-2 px-4 border-2 border-dashed border-primary-300 dark:border-primary-700 text-primary-600 dark:text-primary-400 rounded-lg hover:bg-primary-50 dark:hover:bg-slate-700 transition-colors font-medium">
                                        <i class="fas fa-plus mr-2"></i> Add Link
                                    </button>
                                </div>
                            </form>
                        </div>
                        
                        <!-- Modal Footer -->
                        <div class="border-t border-gray-200 dark:border-slate-700 px-6 py-4 bg-gray-50 dark:bg-slate-700 sm:flex sm:flex-row-reverse gap-3">
                            <button type="button" onclick="submitDoubtForm()" class="w-full sm:w-auto inline-flex justify-center items-center gap-2 px-6 py-2.5 bg-gradient-to-r from-primary-600 to-primary-700 dark:from-primary-600 dark:to-primary-700 text-white rounded-lg hover:from-primary-700 hover:to-primary-800 dark:hover:from-primary-700 dark:hover:to-primary-800 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 font-semibold transition-all shadow-md hover:shadow-lg">
                                <i class="fas fa-paper-plane"></i> Post Question
                            </button>
                            <button type="button" @click="postOpen = false" class="w-full sm:w-auto inline-flex justify-center items-center gap-2 px-6 py-2.5 border-2 border-gray-300 dark:border-slate-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 font-semibold transition-all">
                                <i class="fas fa-times"></i> Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter Sidebar Column -->
        <div class="lg:w-1/4" x-data="filterData()" x-init="initFilters()">
            <div class="bg-white dark:bg-slate-800 rounded-xl shadow-md p-5 sticky top-6 border border-gray-200 dark:border-slate-700">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center">
                    <i class="fas fa-filter mr-2 text-primary-600 dark:text-primary-400"></i>
                    Filter
                </h3>

                <div class="space-y-4">
                    <!-- Class Filter -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Class</label>
                        <select x-model="selectedClass" @change="updateSubjects()" 
                                class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
                            <option value="">All Classes</option>
                            {% for class_level in class_levels %}
                            <option value="{{ class_level.id }}" {% if current_filters.class == class_level.id|stringformat:"s" %}selected{% endif %}>{{ class_level.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Subject Filter -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Subject</label>
                        <select x-model="selectedSubject" @change="updateChapters()" :disabled="!selectedClass"
                                class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
                            <option value="">All Subjects</option>
                            <template x-for="subject in filteredSubjects" :key="subject.id">
                                <option :value="subject.id" x-text="subject.name" {% if current_filters.subject == subject.id|stringformat:"s" %}selected{% endif %}></option>
                            </template>
                        </select>
                    </div>

                    <!-- Chapter Filter -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Chapter</label>
                        <select x-model="selectedChapter" :disabled="!selectedSubject"
                                class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
                            <option value="">All Chapters</option>
                            <template x-for="chapter in filteredChapters" :key="chapter.id">
                                <option :value="chapter.id" x-text="chapter.title" {% if current_filters.chapter == chapter.id|stringformat:"s" %}selected{% endif %}></option>
                            </template>
                        </select>
                    </div>

                    <!-- Sort Filter -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Sort By</label>
                        <select x-model="sortBy"
                                class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
                            <option value="newest" {% if current_filters.sort == 'newest' %}selected{% endif %}>Newest First</option>
                            <option value="oldest" {% if current_filters.sort == 'oldest' %}selected{% endif %}>Oldest First</option>
                            <option value="most_liked" {% if current_filters.sort == 'most_liked' %}selected{% endif %}>Most Liked</option>
                            <option value="most_commented" {% if current_filters.sort == 'most_commented' %}selected{% endif %}>Most Commented</option>
                        </select>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex space-x-3 pt-2">
                        <button @click="applyFilters()" 
                                class="flex-1 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 dark:bg-primary-600 hover:bg-primary-700 dark:hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-slate-800">
                            Apply Filters
                        </button>
                        <button @click="resetFilters()" 
                                class="flex-1 inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-slate-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-slate-700 hover:bg-gray-50 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-slate-800">
                            Reset
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Mobile Filter Modal -->
<div class="fixed inset-0 overflow-y-auto z-50" x-show="filterOpen" x-cloak>
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true" @click="filterOpen = false">
            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        
        <div class="inline-block align-bottom bg-white dark:bg-slate-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white dark:bg-slate-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100 mb-4">Filter</h3>
                
                <div class="space-y-4" x-data="filterData()" x-init="initFilters()">
                    <!-- Class Filter -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Class</label>
                        <select x-model="selectedClass" @change="updateSubjects()" 
                                class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
                            <option value="">All Classes</option>
                            {% for class_level in class_levels %}
                            <option value="{{ class_level.id }}" {% if current_filters.class == class_level.id|stringformat:"s" %}selected{% endif %}>{{ class_level.name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Subject Filter -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Subject</label>
                        <select x-model="selectedSubject" @change="updateChapters()" :disabled="!selectedClass"
                                class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
                            <option value="">All Subjects</option>
                            <template x-for="subject in filteredSubjects" :key="subject.id">
                                <option :value="subject.id" x-text="subject.name" {% if current_filters.subject == subject.id|stringformat:"s" %}selected{% endif %}></option>
                            </template>
                        </select>
                    </div>

                    <!-- Chapter Filter -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Chapter</label>
                        <select x-model="selectedChapter" :disabled="!selectedSubject"
                                class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
                            <option value="">All Chapters</option>
                            <template x-for="chapter in filteredChapters" :key="chapter.id">
                                <option :value="chapter.id" x-text="chapter.title" {% if current_filters.chapter == chapter.id|stringformat:"s" %}selected{% endif %}></option>
                            </template>
                        </select>
                    </div>

                    <!-- Sort Filter -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Sort By</label>
                        <select x-model="sortBy"
                                class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md">
                            <option value="newest" {% if current_filters.sort == 'newest' %}selected{% endif %}>Newest First</option>
                            <option value="oldest" {% if current_filters.sort == 'oldest' %}selected{% endif %}>Oldest First</option>
                            <option value="most_liked" {% if current_filters.sort == 'most_liked' %}selected{% endif %}>Most Liked</option>
                            <option value="most_commented" {% if current_filters.sort == 'most_commented' %}selected{% endif %}>Most Commented</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <div class="bg-gray-50 dark:bg-slate-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button type="button" @click="applyFilters(); filterOpen = false" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 dark:bg-primary-600 text-base font-medium text-white hover:bg-primary-700 dark:hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-slate-800 sm:ml-3 sm:w-auto sm:text-sm">
                    Apply Filters
                </button>
                <button type="button" @click="resetFilters(); filterOpen = false" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-slate-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-800 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-slate-800 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                    Reset
                </button>
            </div>
        </div>
    </div>
</div>
</turbo-frame>

{% endblock %}

{% block script_link %}
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script>
// Alpine.js Data for Filters
function filterData() {
    return {
        selectedClass: '{{ current_filters.class|default:"" }}',
        selectedSubject: '{{ current_filters.subject|default:"" }}',
        selectedChapter: '{{ current_filters.chapter|default:"" }}',
        sortBy: '{{ current_filters.sort|default:"newest" }}',
        filteredSubjects: [],
        filteredChapters: [],
        allSubjects: [
            {% for subject in subjects %}
            { 
                id: '{{ subject.id }}', 
                name: '{{ subject.name }}', 
                class_level_id: '{{ subject.class_level.id }}' 
            },
            {% endfor %}
        ],
        allChapters: [
            {% for chapter in chapters %}
            { 
                id: '{{ chapter.id }}', 
                title: '{{ chapter.title }}', 
                subject_id: '{{ chapter.subject.id }}' 
            },
            {% endfor %}
        ],
        
        initFilters() {
            if (this.selectedClass) {
                this.updateSubjects(false);
            }
            if (this.selectedSubject) {
                this.updateChapters(false);
            }
        },
        
        updateSubjects(resetSelections = true) {
            if (!this.selectedClass) {
                this.filteredSubjects = [];
                if (resetSelections) {
                    this.selectedSubject = '';
                    this.selectedChapter = '';
                }
                return;
            }
            
            this.filteredSubjects = this.allSubjects.filter(
                subject => subject.class_level_id === this.selectedClass
            );
            
            if (resetSelections) {
                this.selectedSubject = '';
                this.selectedChapter = '';
            }
        },
        
        updateChapters(resetSelections = true) {
            if (!this.selectedSubject) {
                this.filteredChapters = [];
                if (resetSelections) {
                    this.selectedChapter = '';
                }
                return;
            }
            
            this.filteredChapters = this.allChapters.filter(
                chapter => chapter.subject_id === this.selectedSubject
            );
            
            if (resetSelections) {
                this.selectedChapter = '';
            }
        },
        
        applyFilters() {
            const params = new URLSearchParams();
            
            if (this.selectedClass) params.append('class', this.selectedClass);
            if (this.selectedSubject) params.append('subject', this.selectedSubject);
            if (this.selectedChapter) params.append('chapter', this.selectedChapter);
            if (this.sortBy) params.append('sort', this.sortBy);
            
            window.location.search = params.toString();
        },
        
        resetFilters() {
            window.location.search = '';
        }
    };
}

// Post type toggle
document.addEventListener('DOMContentLoaded', function() {
    const postTypeSelect = document.querySelector('select[name="post_type"]');
    const imageSection = document.getElementById('image-upload-section');
    const documentSection = document.getElementById('document-upload-section');
    const linkSection = document.getElementById('link-section');
    
    function toggleSections() {
        const selectedType = postTypeSelect.value;
        
        // Hide all sections first
        imageSection.classList.add('hidden');
        documentSection.classList.add('hidden');
        linkSection.classList.add('hidden');
        
        // Show the selected section
        if (selectedType === 'image') {
            imageSection.classList.remove('hidden');
        } else if (selectedType === 'document') {
            documentSection.classList.remove('hidden');
        } else if (selectedType === 'link') {
            linkSection.classList.remove('hidden');
        }
    }
    
    postTypeSelect.addEventListener('change', toggleSections);
    toggleSections(); // Initialize
    
    // Handle image file selection
    const imageInput = document.getElementById('images');
    const imageCaptionsContainer = document.getElementById('image-captions-container');
    
    imageInput.addEventListener('change', function() {
        imageCaptionsContainer.innerHTML = '';
        
        for (let i = 0; i < this.files.length; i++) {
            const div = document.createElement('div');
            div.className = 'flex items-center';
            div.innerHTML = `
                <span class="text-sm text-gray-500 truncate mr-2" style="max-width: 150px;">${this.files[i].name}</span>
                <input type="text" name="image_captions" placeholder="Caption (Optional)" class="flex-1 text-sm border border-gray-300 rounded-md px-2 py-1">
            `;
            imageCaptionsContainer.appendChild(div);
        }
    });
});

// Add link field
function addLinkField() {
    const linksContainer = document.getElementById('links-container');
    const div = document.createElement('div');
    div.className = 'flex space-x-2';
    div.innerHTML = `
        <input type="url" name="links" class="flex-1 block border border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="URL">
        <input type="text" name="link_descriptions" class="flex-1 block border border-gray-300 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm" placeholder="Description (Optional)">
        <button type="button" onclick="this.parentNode.remove()" class="text-red-500 hover:text-red-700">
            <i class="fas fa-times"></i>
        </button>
    `;
    linksContainer.appendChild(div);
}

// Load subjects based on selected class
document.getElementById('class_level').addEventListener('change', function() {
    const classId = this.value;
    const subjectSelect = document.getElementById('subject');
    const chapterSelect = document.getElementById('chapter');
    
    if (classId) {
        fetch(`/doubts/get-subjects/?class_level_id=${classId}`)
            .then(response => response.text())
            .then(html => {
                subjectSelect.innerHTML = html;
                subjectSelect.disabled = false;
                chapterSelect.innerHTML = '<option value="">Select Chapter</option>';
                chapterSelect.disabled = true;
            })
            .catch(error => {
                console.error('Error loading subjects:', error);
                subjectSelect.innerHTML = '<option value="">Error loading subjects</option>';
            });
    } else {
        subjectSelect.innerHTML = '<option value="">Select Subject</option>';
        subjectSelect.disabled = true;
        chapterSelect.innerHTML = '<option value="">Select Chapter</option>';
        chapterSelect.disabled = true;
    }
});

// Load chapters based on selected subject
document.getElementById('subject').addEventListener('change', function() {
    const subjectId = this.value;
    const chapterSelect = document.getElementById('chapter');
    
    if (subjectId) {
        fetch(`/doubts/get-chapters/?subject_id=${subjectId}`)
            .then(response => response.text())
            .then(html => {
                chapterSelect.innerHTML = html;
                chapterSelect.disabled = false;
            })
            .catch(error => {
                console.error('Error loading chapters:', error);
                chapterSelect.innerHTML = '<option value="">Error loading chapters</option>';
            });
    } else {
        chapterSelect.innerHTML = '<option value="">Select Chapter</option>';
        chapterSelect.disabled = true;
    }
});

// Submit doubt form
function submitDoubtForm() {
    const form = document.getElementById('post-doubt-form');
    const formData = new FormData(form);
    
    // Validate required fields
    const title = formData.get('title');
    const classLevel = formData.get('class_level');
    const subject = formData.get('subject');
    
    if (!title || title.trim() === '') {
        alert('Please enter a question title');
        return;
    }
    
    if (!classLevel) {
        alert('Please select a class');
        return;
    }
    
    if (!subject) {
        alert('Please select a subject');
        return;
    }
    
    // Show loading state
    const submitBtn = document.querySelector('button[onclick="submitDoubtForm()"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Posting...';
    
    fetch('/doubts/post-doubt/', {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success message
            alert(data.message || 'Question posted successfully!');
            // Close modal
            const mainContent = document.querySelector('.lg\\:w-3\\/4[x-data]');
            if (mainContent && mainContent.__alpine) {
                mainContent.__alpine.$data.postOpen = false;
            }
            // Reload page to show new post
            setTimeout(() => {
                window.location.reload();
            }, 500);
        } else {
            alert(data.error || 'Error posting question');
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while posting your question. Please try again.');
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
    });
}

// Like a doubt
function likeDoubt(doubtId) {
    const doubtCard = document.querySelector(`[x-data*="commentOpen"][x-data*="liked"][x-data*="bookmarked"] button[onclick="likeDoubt('${doubtId}')"]`).closest('[x-data]');
    let liked = doubtCard.__alpine.$data.liked;

    const likeCountSpan = document.getElementById(`like-count-${doubtId}`);
    const currentLikes = parseInt(likeCountSpan.textContent);

    // Optimistic UI update
    if (liked) {
        likeCountSpan.textContent = currentLikes - 1;
    } else {
        likeCountSpan.textContent = currentLikes + 1;
    }
    doubtCard.__alpine.$data.liked = !liked;
    
    fetch(`/doubts/like/${doubtId}/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',
            'Content-Type': 'application/x-www-form-urlencoded',
        },
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        if (!data.success) {
            // Revert UI if API call failed
            doubtCard.__alpine.$data.liked = liked; // Revert to original state
            likeCountSpan.textContent = currentLikes; // Revert count
        }
    })
    .catch(error => {
        console.error('Error:', error);
        // Revert UI on error
        doubtCard.__alpine.$data.liked = liked; // Revert to original state
        likeCountSpan.textContent = currentLikes; // Revert count
    });
}

// Bookmark a doubt
function bookmarkDoubt(doubtId) {
    const doubtCard = document.querySelector(`[x-data*="commentOpen"][x-data*="liked"][x-data*="bookmarked"] button[onclick="bookmarkDoubt('${doubtId}')"]`).closest('[x-data]');
    let bookmarked = doubtCard.__alpine.$data.bookmarked;

    // Optimistic UI update
    doubtCard.__alpine.$data.bookmarked = !bookmarked;
    
    fetch(`/doubts/bookmark/${doubtId}/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',
            'Content-Type': 'application/x-www-form-urlencoded',
        },
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        if (!data.success) {
            // Revert UI if API call failed
            doubtCard.__alpine.$data.bookmarked = bookmarked; // Revert to original state
        }
    })
    .catch(error => {
        console.error('Error:', error);
        // Revert UI on error
        doubtCard.__alpine.$data.bookmarked = bookmarked; // Revert to original state
    });
}

// Load comments for a doubt
function loadComments(doubtId) {
    const commentsContainer = document.getElementById(`comments-${doubtId}`);
    if (!commentsContainer) return;
    
    commentsContainer.innerHTML = '<div class="text-center py-4"><i class="fas fa-spinner fa-spin text-gray-400"></i></div>';
    
    fetch(`/doubts/comments/${doubtId}/`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text();
        })
        .then(html => {
            commentsContainer.innerHTML = html;
        })
        .catch(error => {
            console.error('Error fetching comments:', error);
            commentsContainer.innerHTML = '<p class="text-red-500 text-sm text-center py-4">Error loading comments.</p>';
        });
}

// Post a comment
function postComment(event, doubtId) {
    event.preventDefault();
    const content = event.target.content.value.trim();
    const form = event.target;
    
    if (!content) {
        alert('Comment cannot be empty');
        return;
    }
    
    // Show loading state
    const submitBtn = form.querySelector('button[type="submit"]');
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
    
    fetch(`/doubts/comment/${doubtId}/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `content=${encodeURIComponent(content)}`
    })
    .then(response => {
        if (!response.ok) {
            return response.json().then(err => { throw new Error(err.error || 'Network response was not ok'); });
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            form.content.value = '';
            
            // Add new comment to the list
            const commentsContainer = document.getElementById(`comments-${doubtId}`);
            if (commentsContainer) {
                const newComment = document.createElement('div');
                newComment.className = 'flex gap-3';
                newComment.innerHTML = `
                    <div class="flex-shrink-0">
                        ${data.user_profile_pic ? 
                            `<img class="h-8 w-8 rounded-full object-cover" src="${data.user_profile_pic}" alt="${data.user_name}">` : 
                            `<div class="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center">
                                <i class="fas fa-user text-gray-500 text-xs"></i>
                            </div>`
                        }
                    </div>
                    <div class="flex-1 bg-white p-3 rounded-lg">
                        <div class="flex justify-between items-start">
                            <span class="font-semibold text-sm">${data.user_name}</span>
                            <span class="text-xs text-gray-500">Just now</span>
                        </div>
                        <p class="text-sm mt-1">${content}</p>
                    </div>
                `;
                commentsContainer.prepend(newComment);
            }
            
            // Update comment count
            const commentCount = document.querySelector(`button[onclick^="loadComments"][onclick*="${doubtId}"] span`);
            if (commentCount) {
                commentCount.textContent = parseInt(commentCount.textContent) + 1;
            }
        } else {
            alert(data.error || 'Error posting comment');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('An error occurred while posting the comment: ' + error.message);
    })
    .finally(() => {
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i class="fas fa-paper-plane"></i>';
    });
}

// Subject and Chapter Management
const subjectsData = {
    {% for class_level in class_levels %}
    '{{ class_level.id }}': [
        {% for subject in class_level.subjects.all %}
        { 
            id: '{{ subject.id }}', 
            name: '{{ subject.name }}', 
            chapters: [
                {% for chapter in subject.chapters.all %}
                { id: '{{ chapter.id }}', title: '{{ chapter.title }}' }{% if not forloop.last %},{% endif %}
                {% endfor %}
            ]
        }{% if not forloop.last %},{% endif %}
        {% endfor %}
    ]{% if not forloop.last %},{% endif %}
    {% endfor %}
};

console.log('Subjects Data:', subjectsData);

function updateSubjects() {
    const classSelect = document.getElementById('class_level');
    const subjectSelect = document.getElementById('subject');
    const chapterSelect = document.getElementById('chapter');
    const classId = classSelect.value;
    
    // Clear and disable subject select
    subjectSelect.innerHTML = '<option value="">Select Subject</option>';
    subjectSelect.disabled = true;
    chapterSelect.innerHTML = '<option value="">Select Chapter</option>';
    chapterSelect.disabled = true;
    
    if (classId && subjectsData[classId]) {
        subjectSelect.disabled = false;
        const subjects = subjectsData[classId];
        subjects.forEach(subject => {
            const option = document.createElement('option');
            option.value = subject.id;
            option.textContent = subject.name;
            subjectSelect.appendChild(option);
        });
    }
}

function updateChapters() {
    const classSelect = document.getElementById('class_level');
    const subjectSelect = document.getElementById('subject');
    const chapterSelect = document.getElementById('chapter');
    const classId = classSelect.value;
    const subjectId = subjectSelect.value;
    
    // Clear and disable chapter select
    chapterSelect.innerHTML = '<option value="">Select Chapter</option>';
    chapterSelect.disabled = true;
    
    if (classId && subjectId && subjectsData[classId]) {
        const subjects = subjectsData[classId];
        const selectedSubject = subjects.find(s => s.id == subjectId);
        
        if (selectedSubject && selectedSubject.chapters.length > 0) {
            chapterSelect.disabled = false;
            selectedSubject.chapters.forEach(chapter => {
                const option = document.createElement('option');
                option.value = chapter.id;
                option.textContent = chapter.title;
                chapterSelect.appendChild(option);
            });
        }
    }
}

function toggleUploadSections() {
    const postType = document.querySelector('input[name="post_type"]:checked').value;
    document.getElementById('image-upload-section').style.display = postType === 'image' ? 'block' : 'none';
    document.getElementById('document-upload-section').style.display = postType === 'document' ? 'block' : 'none';
    document.getElementById('link-upload-section').style.display = postType === 'link' ? 'block' : 'none';
}

function previewImages(input) {
    const preview = document.getElementById('image_preview');
    preview.innerHTML = '';
    
    if (input.files && input.files.length > 0) {
        Array.from(input.files).forEach((file, index) => {
            const reader = new FileReader();
            reader.onload = (e) => {
                const div = document.createElement('div');
                div.className = 'relative group';
                div.innerHTML = `
                    <img src="${e.target.result}" alt="Preview" class="w-full h-32 object-cover rounded-lg">
                    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all rounded-lg"></div>
                `;
                preview.appendChild(div);
            };
            reader.readAsDataURL(file);
        });
    }
}

function previewDocuments(input) {
    const preview = document.getElementById('document_preview');
    preview.innerHTML = '';
    
    if (input.files && input.files.length > 0) {
        Array.from(input.files).forEach((file) => {
            const div = document.createElement('div');
            div.className = 'flex items-center gap-2 p-3 bg-primary-50 dark:bg-slate-700 rounded-lg';
            div.innerHTML = `
                <i class="fas fa-file-pdf text-primary-600 dark:text-primary-400 text-lg"></i>
                <span class="text-sm text-gray-700 dark:text-gray-300 truncate">${file.name}</span>
                <span class="text-xs text-gray-500 dark:text-gray-400 ml-auto">${(file.size / 1024 / 1024).toFixed(2)} MB</span>
            `;
            preview.appendChild(div);
        });
    }
}

function addLinkField() {
    const container = document.getElementById('links-container');
    const div = document.createElement('div');
    div.className = 'flex gap-2 items-end';
    div.innerHTML = `
        <input type="url" name="links" class="flex-1 px-3 py-2.5 border-2 border-gray-200 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 rounded-lg focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-900 transition-all" placeholder="https://example.com">
        <input type="text" name="link_descriptions" class="flex-1 px-3 py-2.5 border-2 border-gray-200 dark:border-slate-600 dark:bg-slate-700 dark:text-gray-100 rounded-lg focus:outline-none focus:border-primary-500 focus:ring-2 focus:ring-primary-200 dark:focus:ring-primary-900 transition-all" placeholder="Link description">
        <button type="button" onclick="this.parentNode.remove()" class="px-3 py-2.5 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors">
            <i class="fas fa-trash text-lg"></i>
        </button>
    `;
    container.appendChild(div);
}

</script>
{% endblock %}