{% extends "base.html" %}

{% block title %}Share Your Adventure - Create New Post{% endblock %}

{% block head %}
<style>
    .content-section {
        border: 2px dashed #d1d5db;
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
        background: rgba(255, 255, 255, 0.05);
    }
    
    .content-section.editing {
        border-color: #3b82f6;
        background: rgba(59, 130, 246, 0.1);
    }
    
    .content-section.saved {
        border-color: #10b981;
        border-style: solid;
        background: rgba(16, 185, 129, 0.1);
    }
    
    .highlight-input {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: white;
        font-weight: 600;
        border: none;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        margin: 0 0.25rem;
    }
    
    .highlight-display {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: white;
        font-weight: 600;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        margin: 0 0.25rem;
        display: inline-block;
    }
    
    .image-preview {
        position: relative;
        display: inline-block;
        margin: 0.5rem;
    }
    
    .image-preview img {
        width: 150px;
        height: 100px;
        object-fit: cover;
        border-radius: 0.5rem;
        border: 2px solid #e5e7eb;
    }
    
    .image-preview .remove-btn {
        position: absolute;
        top: -8px;
        right: -8px;
        background: #ef4444;
        color: white;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 12px;
    }
    
    /* Cover upload styles */
    .cover-upload-area {
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .cover-upload-area:hover {
        background: rgba(255, 255, 255, 0.05);
    }
    
    /* Dropdown styling */
    select option {
        background-color: #1f2937;
        color: #ffffff;
    }
    
    select option:checked {
        background-color: #0891b2;
    }
    
    /* Section styling */
    .content-section {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.75rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .section-actions-frame {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .add-section-frame {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.1));
        border: 1px solid rgba(59, 130, 246, 0.3);
    }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-teal-900 py-12">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold text-white mb-4">
                🏍️ Share Your Adventure
            </h1>
            <p class="text-blue-200 text-lg">
                Create a detailed story of your motorcycle journey through Romania
            </p>
        </div>

        <!-- Main Form -->
        <form id="adventure-form" method="POST" action="{{ url_for('community.new_post') }}" enctype="multipart/form-data" class="space-y-6">
            <!-- Basic Information Section -->
            <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
                <h2 class="text-2xl font-bold text-white mb-6">📝 Basic Information</h2>
                
                <!-- Cover Picture -->
                <div class="mb-6">
                    <label for="cover_picture" class="block text-white font-semibold mb-2">Set Cover Picture for the Post</label>
                    <div class="cover-upload-area border-2 border-dashed border-white/30 rounded-lg p-6 text-center hover:border-white/50 transition-all duration-300">
                        <input type="file" id="cover_picture" name="cover_picture" accept="image/*" class="hidden">
                        <div class="cover-upload-content">
                            <div class="text-4xl mb-2">📸</div>
                            <p class="text-white/80 mb-2">Click to upload cover image</p>
                            <p class="text-sm text-white/60">Recommended: 1920x1080 pixels</p>
                        </div>
                        <div class="cover-preview hidden">
                            <img class="cover-preview-image max-h-48 mx-auto rounded-lg" alt="Cover preview">
                            <button type="button" class="cover-remove-btn mt-2 px-3 py-1 bg-red-500/80 text-white rounded hover:bg-red-600 transition-colors">Remove</button>
                        </div>
                    </div>
                </div>

                <!-- Title -->
                <div class="mb-6">
                    <label for="title" class="block text-white font-semibold mb-2">Adventure Title *</label>
                    <input type="text" id="title" name="title" required
                           class="w-full px-4 py-3 rounded-lg bg-white/10 backdrop-blur-sm border border-white/20 
                                  text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-cyan-400 
                                  focus:border-transparent transition-all duration-300"
                           placeholder="Give your adventure a captivating title...">
                </div>
                
                <!-- Subtitle -->
                <div class="mb-6">
                    <label for="subtitle" class="block text-white font-semibold mb-2">Subtitle</label>
                    <input type="text" id="subtitle" name="subtitle"
                           class="w-full px-4 py-3 rounded-lg bg-white/10 backdrop-blur-sm border border-white/20 
                                  text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-cyan-400 
                                  focus:border-transparent transition-all duration-300"
                           placeholder="A brief description of your adventure">
                </div>
                
                <!-- Difficulty Rating -->
                <div class="mb-6">
                    <label for="difficulty" class="block text-white font-semibold mb-2">Route Difficulty *</label>
                    <select id="difficulty" name="difficulty" required
                            class="w-full px-4 py-3 rounded-lg bg-white/10 backdrop-blur-sm border border-white/20 
                                   text-white focus:outline-none focus:ring-2 focus:ring-cyan-400 
                                   focus:border-transparent transition-all duration-300">
                        <option value="" class="bg-gray-800 text-gray-300">Select difficulty level...</option>
                        <option value="1" class="bg-gray-800 text-green-400">🟢 Easy - Beginner friendly roads</option>
                        <option value="2" class="bg-gray-800 text-yellow-400">🟡 Moderate - Some experience needed</option>
                        <option value="3" class="bg-gray-800 text-orange-400">🟠 Challenging - Experienced riders</option>
                        <option value="4" class="bg-gray-800 text-red-400">🔴 Difficult - Advanced skills required</option>
                        <option value="5" class="bg-gray-800 text-purple-400">🟣 Expert - Only for experts</option>
                    </select>
                </div>
            </div>

            <!-- Content Sections -->
            <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
                <h2 class="text-2xl font-bold text-white mb-6">📖 Adventure Story</h2>
                <div id="content-sections">
                    <!-- Initial content section will be added by JavaScript -->
                </div>
                
                <!-- Add New Section Frame -->
                <div class="add-section-frame bg-gradient-to-r from-blue-500/10 to-purple-500/10 border border-blue-400/30 rounded-lg p-6 text-center mt-6">
                    <div class="mb-4">
                        <h3 class="text-lg font-semibold text-blue-300 mb-2">✨ Expand Your Story</h3>
                        <p class="text-white/80 text-sm">Add another section with new text, pictures, and highlights to make your adventure more detailed and engaging</p>
                    </div>
                    <button type="button" id="add-section-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition-all duration-300 transform hover:scale-105 inline-flex items-center">
                        <i class="fas fa-plus mr-2"></i>
                        Add New Section
                    </button>
                </div>
            </div>

            <!-- GPX Upload -->
            <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
                <h2 class="text-2xl font-bold text-white mb-6">🗺️ Route File</h2>
                <div class="border-2 border-dashed border-white/30 rounded-lg p-8 text-center">
                    <i class="fas fa-route text-4xl text-blue-300 mb-4"></i>
                    <div class="text-white font-semibold mb-2">Upload GPX Route File</div>
                    <div class="text-blue-200 text-sm mb-4">
                        Share your exact route so others can follow your adventure
                    </div>
                    <input type="file" id="gpx-file" name="gpx_file" accept=".gpx" class="hidden">
                    <label for="gpx-file" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 cursor-pointer transition">
                        <i class="fas fa-upload mr-2"></i>
                        Choose GPX File
                    </label>
                    <div id="gpx-filename" class="mt-4 text-green-300 hidden"></div>
                </div>
            </div>

            <!-- Submit -->
            <div class="text-center space-x-4">
                <button type="button" onclick="previewPost()" class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white px-8 py-4 rounded-lg font-bold text-lg hover:from-blue-600 hover:to-indigo-700 transform hover:scale-105 transition-all duration-200 shadow-lg">
                    <i class="fas fa-eye mr-3"></i>
                    Preview Adventure
                </button>
                <button type="submit" class="bg-gradient-to-r from-orange-500 to-red-600 text-white px-12 py-4 rounded-lg font-bold text-lg hover:from-orange-600 hover:to-red-700 transform hover:scale-105 transition-all duration-200 shadow-lg">
                    <i class="fas fa-paper-plane mr-3"></i>
                    Share Adventure
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Global storage for section files
    window.sectionFiles = {};
    let sectionCounter = 0;
    
    // Populate form from URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('title')) {
        document.getElementById('title').value = urlParams.get('title');
    }
    if (urlParams.get('subtitle')) {
        document.getElementById('subtitle').value = urlParams.get('subtitle');
    }
    if (urlParams.get('difficulty')) {
        document.getElementById('difficulty').value = urlParams.get('difficulty');
    }
    if (urlParams.get('cover_picture')) {
        // Note: This would be the filename, but we can't pre-populate file inputs for security reasons
        // We'll show a message instead
        const coverUploadArea = document.querySelector('.cover-upload-area');
        const coverContent = document.querySelector('.cover-upload-content');
        coverContent.innerHTML = `
            <div class="text-4xl mb-2">📸</div>
            <p class="text-yellow-300 mb-2">Cover image suggested: ${urlParams.get('cover_picture')}</p>
            <p class="text-white/80 mb-2">Click to upload this or another cover image</p>
            <p class="text-sm text-white/60">Recommended: 1920x1080 pixels</p>
        `;
    }
    if (urlParams.get('gpx_file')) {
        // Similar note for GPX file
        const gpxLabel = document.querySelector('label[for="gpx-file"]');
        gpxLabel.innerHTML = `
            <i class="fas fa-upload mr-2"></i>
            Choose GPX File (suggested: ${urlParams.get('gpx_file')})
        `;
    }
    
    // Cover picture upload
    const coverUploadArea = document.querySelector('.cover-upload-area');
    const coverInput = document.getElementById('cover_picture');
    const coverContent = document.querySelector('.cover-upload-content');
    const coverPreview = document.querySelector('.cover-preview');
    const coverImage = document.querySelector('.cover-preview-image');
    const coverRemoveBtn = document.querySelector('.cover-remove-btn');

    coverUploadArea.addEventListener('click', () => coverInput.click());
    
    coverInput.addEventListener('change', function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                coverImage.src = e.target.result;
                coverContent.style.display = 'none';
                coverPreview.classList.remove('hidden');
            };
            reader.readAsDataURL(file);
        }
    });
    
    coverRemoveBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        coverInput.value = '';
        coverContent.style.display = 'block';
        coverPreview.classList.add('hidden');
    });
    
    // GPX file input
    document.getElementById('gpx-file').addEventListener('change', function() {
        const filename = this.files[0]?.name;
        const filenameDiv = document.getElementById('gpx-filename');
        if (filename) {
            filenameDiv.textContent = `Selected: ${filename}`;
            filenameDiv.classList.remove('hidden');
        } else {
            filenameDiv.classList.add('hidden');
        }
    });
    
    // Add initial content section
    addContentSection();
    
    // Add section button
    document.getElementById('add-section-btn').addEventListener('click', addContentSection);
    
    function addContentSection() {
        sectionCounter++;
        const sectionsContainer = document.getElementById('content-sections');
        
        const section = document.createElement('div');
        section.className = 'content-section editing';
        section.dataset.sectionId = sectionCounter;
        
        section.innerHTML = `
            <div class="section-header mb-4">
                <h3 class="text-lg font-semibold text-white">Section ${sectionCounter}</h3>
            </div>
            
            <div class="section-content">
                <!-- Highlights Input -->
                <div class="mb-4">
                    <label class="block text-white font-semibold mb-2">Key Highlights (1-5 words)</label>
                    <div class="highlights-container mb-2">
                        <input type="text" class="highlight-input bg-white/10 backdrop-blur-sm border border-white/20 text-white placeholder-white/60 px-3 py-2 rounded mr-2" placeholder="Highlight 1" maxlength="20">
                        <input type="text" class="highlight-input bg-white/10 backdrop-blur-sm border border-white/20 text-white placeholder-white/60 px-3 py-2 rounded mr-2" placeholder="Highlight 2" maxlength="20">
                        <input type="text" class="highlight-input bg-white/10 backdrop-blur-sm border border-white/20 text-white placeholder-white/60 px-3 py-2 rounded mr-2" placeholder="Highlight 3" maxlength="20">
                        <button type="button" class="add-highlight-btn text-white bg-blue-600 px-3 py-1 rounded ml-2 hover:bg-blue-700 transition">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Text Content -->
                <div class="mb-4">
                    <label class="block text-white font-semibold mb-2">Section Content</label>
                    <textarea class="section-text w-full px-4 py-3 rounded-lg bg-white/10 backdrop-blur-sm border border-white/20 text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:border-transparent" 
                              rows="6" placeholder="Describe this part of your adventure..."></textarea>
                </div>
                
                <!-- Image Upload -->
                <div class="mb-6">
                    <label class="block text-white font-semibold mb-2">Photos</label>
                    <div class="image-upload-area border-2 border-dashed border-white/30 rounded-lg p-4 text-center hover:border-white/50 transition-all duration-300">
                        <input type="file" class="section-images" multiple accept="image/*" style="display: none;">
                        <button type="button" class="upload-images-btn bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
                            <i class="fas fa-camera mr-2"></i> Add Photos
                        </button>
                        <div class="images-preview mt-4"></div>
                    </div>
                </div>
                
                <!-- Section Actions Frame -->
                <div class="section-actions-frame bg-white/5 border border-white/20 rounded-lg p-4 mb-4">
                    <div class="text-center mb-3">
                        <p class="text-yellow-300 font-medium">💡 Section Actions</p>
                        <p class="text-white/70 text-sm">Save your content, delete this section, or edit after saving</p>
                    </div>
                    <div class="section-actions flex justify-center space-x-3">
                        <button type="button" class="save-section-btn bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition">
                            <i class="fas fa-save mr-1"></i> Save
                        </button>
                        <button type="button" class="delete-section-btn bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition">
                            <i class="fas fa-trash mr-1"></i> Delete
                        </button>
                        <button type="button" class="edit-section-btn bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition hidden">
                            <i class="fas fa-edit mr-1"></i> Edit
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Saved Content Display (hidden initially) -->
            <div class="saved-content hidden">
                <div class="saved-highlights mb-4"></div>
                <div class="saved-text mb-4 text-white"></div>
                <div class="saved-images"></div>
            </div>
        `;
        
        sectionsContainer.appendChild(section);
        
        // Add event listeners for this section
        setupSectionEventListeners(section);
    }
    
    function setupSectionEventListeners(section) {
        const sectionId = section.dataset.sectionId;
        
        // Image upload
        const uploadBtn = section.querySelector('.upload-images-btn');
        const imageInput = section.querySelector('.section-images');
        const imagesPreview = section.querySelector('.images-preview');
        
        uploadBtn.addEventListener('click', () => imageInput.click());
        
        imageInput.addEventListener('change', function() {
            const files = Array.from(this.files);
            
            // Store files in global storage for this section
            if (!window.sectionFiles[sectionId]) {
                window.sectionFiles[sectionId] = [];
            }
            
            files.forEach(file => {
                if (file.type.startsWith('image/')) {
                    // Add to global storage
                    window.sectionFiles[sectionId].push(file);
                    
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const imagePreview = document.createElement('div');
                        imagePreview.className = 'image-preview';
                        imagePreview.dataset.fileIndex = window.sectionFiles[sectionId].length - 1;
                        imagePreview.innerHTML = `
                            <img src="${e.target.result}" alt="Preview">
                            <div class="remove-btn">&times;</div>
                        `;
                        
                        imagePreview.querySelector('.remove-btn').addEventListener('click', function() {
                            // Remove from global storage
                            const fileIndex = parseInt(imagePreview.dataset.fileIndex);
                            window.sectionFiles[sectionId].splice(fileIndex, 1);
                            
                            // Update indices for remaining previews
                            const remainingPreviews = imagesPreview.querySelectorAll('.image-preview');
                            remainingPreviews.forEach((preview, index) => {
                                if (parseInt(preview.dataset.fileIndex) > fileIndex) {
                                    preview.dataset.fileIndex = parseInt(preview.dataset.fileIndex) - 1;
                                }
                            });
                            
                            imagePreview.remove();
                        });
                        
                        imagesPreview.appendChild(imagePreview);
                    };
                    reader.readAsDataURL(file);
                }
            });
        });
        
        // Add highlight button
        section.querySelector('.add-highlight-btn').addEventListener('click', function() {
            const highlightsContainer = section.querySelector('.highlights-container');
            const newHighlight = document.createElement('input');
            newHighlight.type = 'text';
            newHighlight.className = 'highlight-input';
            newHighlight.placeholder = 'New highlight';
            newHighlight.maxLength = 20;
            highlightsContainer.insertBefore(newHighlight, this);
        });
        
        // Save section
        section.querySelector('.save-section-btn').addEventListener('click', function() {
            saveSection(section);
        });
        
        // Delete section
        section.querySelector('.delete-section-btn').addEventListener('click', function() {
            if (confirm('Are you sure you want to delete this section?')) {
                section.remove();
            }
        });
        
        // Edit section
        section.querySelector('.edit-section-btn').addEventListener('click', function() {
            editSection(section);
        });
    }
    
    function saveSection(section) {
        const highlights = Array.from(section.querySelectorAll('.highlight-input'))
            .map(input => input.value.trim())
            .filter(value => value);
        
        const text = section.querySelector('.section-text').value.trim();
        const images = section.querySelectorAll('.images-preview img');
        
        if (!text && highlights.length === 0 && images.length === 0) {
            alert('Please add some content to this section before saving.');
            return;
        }
        
        // Show saved content
        const savedContent = section.querySelector('.saved-content');
        const savedHighlights = section.querySelector('.saved-highlights');
        const savedText = section.querySelector('.saved-text');
        const savedImages = section.querySelector('.saved-images');
        
        // Display highlights
        savedHighlights.innerHTML = highlights.map(h => 
            `<span class="highlight-display bg-cyan-600/20 text-cyan-300 px-2 py-1 rounded mr-2">${h}</span>`
        ).join('');
        
        // Display text
        savedText.innerHTML = text.replace(/\n/g, '<br>');
        
        // Display images
        savedImages.innerHTML = '';
        images.forEach(img => {
            const imgCopy = img.cloneNode();
            imgCopy.className = 'w-32 h-24 object-cover rounded m-1';
            savedImages.appendChild(imgCopy);
        });
        
        // Hide editing interface and show saved content
        section.querySelector('.section-content').style.display = 'none';
        savedContent.classList.remove('hidden');
        
        // Update button visibility in actions frame
        section.querySelector('.save-section-btn').style.display = 'none';
        section.querySelector('.delete-section-btn').style.display = 'none';
        section.querySelector('.edit-section-btn').style.display = 'inline-flex';
        
        // Update section appearance
        section.classList.remove('editing');
        section.classList.add('saved');
        
        // Update header
        section.querySelector('.section-header h3').textContent = `Section ${section.dataset.sectionId} ✓`;
        
        // Update actions frame text
        const actionsFrame = section.querySelector('.section-actions-frame');
        actionsFrame.querySelector('p:first-child').innerHTML = '✅ <span class="text-green-300">Section Saved</span>';
        actionsFrame.querySelector('p:last-child').textContent = 'Your content has been saved. You can edit it again if needed.';
    }
    
    function editSection(section) {
        // Show editing interface and hide saved content
        section.querySelector('.section-content').style.display = 'block';
        section.querySelector('.saved-content').classList.add('hidden');
        
        // Update button visibility in actions frame
        section.querySelector('.save-section-btn').style.display = 'inline-flex';
        section.querySelector('.delete-section-btn').style.display = 'inline-flex';
        section.querySelector('.edit-section-btn').style.display = 'none';
        
        // Update section appearance
        section.classList.remove('saved');
        section.classList.add('editing');
        
        // Update header
        section.querySelector('.section-header h3').textContent = `Section ${section.dataset.sectionId}`;
        
        // Restore actions frame text
        const actionsFrame = section.querySelector('.section-actions-frame');
        actionsFrame.querySelector('p:first-child').innerHTML = '💡 <span class="text-yellow-300">Section Actions</span>';
        actionsFrame.querySelector('p:last-child').textContent = 'Save your content, delete this section, or edit after saving';
    }
    
    // Form submission
    document.getElementById('adventure-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Validate required fields
        const title = document.getElementById('title').value.trim();
        const difficulty = document.getElementById('difficulty').value;
        
        if (!title) {
            alert('Please enter an adventure title.');
            return;
        }
        
        if (!difficulty) {
            alert('Please select a difficulty level.');
            return;
        }
        
        // Check if at least one section is saved or allow empty content for now
        const savedSections = document.querySelectorAll('.content-section.saved');
        
        // Collect all form data
        const formData = new FormData();
        formData.append('title', title);
        formData.append('subtitle', document.getElementById('subtitle').value.trim());
        formData.append('difficulty', difficulty);
        
        // Collect content from saved sections
        let fullContent = '';
        if (savedSections.length > 0) {
            savedSections.forEach((section, index) => {
                const highlights = Array.from(section.querySelectorAll('.saved-highlights .highlight-display'))
                    .map(span => span.textContent);
                const text = section.querySelector('.saved-text').textContent;
                
                if (highlights.length > 0) {
                    fullContent += highlights.map(h => `**${h}**`).join(' ') + '\n\n';
                }
                if (text) {
                    fullContent += text + '\n\n';
                }
            });
        } else {
            // If no sections saved, use a default message
            fullContent = 'Adventure details will be added soon.';
        }
        
        formData.append('content', fullContent);
        
        // Add cover picture if selected
        const coverFile = document.getElementById('cover_picture').files[0];
        if (coverFile) {
            formData.append('cover_picture', coverFile);
        }
        
        // Add GPX file if selected
        const gpxFile = document.getElementById('gpx-file').files[0];
        if (gpxFile) {
            formData.append('gpx_file', gpxFile);
        }

        // Add section images from all saved sections
        let imageCounter = 0;
        savedSections.forEach((section, sectionIndex) => {
            const sectionId = section.dataset.sectionId;
            if (window.sectionFiles[sectionId] && window.sectionFiles[sectionId].length > 0) {
                window.sectionFiles[sectionId].forEach((file, fileIndex) => {
                    formData.append(`section_image_${imageCounter}`, file);
                    formData.append(`section_image_${imageCounter}_section`, sectionIndex);
                    imageCounter++;
                });
            }
        });
        
        // Show loading state
        const submitBtn = document.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-3"></i>Creating Adventure...';
        submitBtn.disabled = true;
        
        // Submit form
        fetch('{{ url_for("community.new_post") }}', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (response.redirected) {
                // Follow redirect
                window.location.href = response.url;
            } else if (response.ok) {
                // Check if it's JSON response
                return response.text().then(text => {
                    try {
                        const data = JSON.parse(text);
                        if (data.success) {
                            window.location.href = data.redirect_url || '/community/';
                        } else {
                            throw new Error(data.error || 'Unknown error');
                        }
                    } catch (e) {
                        // Not JSON, probably HTML redirect response
                        window.location.href = '/community/';
                    }
                });
            } else {
                throw new Error('Server error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('An error occurred while creating your post. Please try again.');
            
            // Restore button
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    });

    // Preview function
    function previewPost() {
        // Get form data
        const title = document.getElementById('title').value;
        const subtitle = document.getElementById('subtitle').value;
        const content = document.getElementById('content').value;
        const difficulty = document.getElementById('difficulty').value;
        
        // Get difficulty stars and labels
        const difficultyStars = '⭐'.repeat(difficulty);
        const difficultyLabels = {
            '1': 'Easy - Beginner friendly',
            '2': 'Moderate - Some experience needed', 
            '3': 'Challenging - Good skills required',
            '4': 'Hard - Advanced riders only',
            '5': 'Expert - Extreme difficulty'
        };
        
        // Format content (simple markdown-like formatting)
        const formattedContent = content
            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
            .replace(/\*(.*?)\*/g, '<em>$1</em>')
            .replace(/\n/g, '<br>');
        
        // Get cover image preview if available
        const coverInput = document.getElementById('cover_picture');
        let coverImageHtml = '';
        if (coverInput.files && coverInput.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                showPreviewModal(title, subtitle, formattedContent, difficulty, difficultyStars, difficultyLabels, e.target.result);
            };
            reader.readAsDataURL(coverInput.files[0]);
        } else {
            showPreviewModal(title, subtitle, formattedContent, difficulty, difficultyStars, difficultyLabels, null);
        }
    }
    
    function showPreviewModal(title, subtitle, formattedContent, difficulty, difficultyStars, difficultyLabels, coverImageSrc) {
        // Create cover image section
        let coverImageHtml = '';
        if (coverImageSrc) {
            coverImageHtml = `
                <div class="position-relative mb-4">
                    <img src="${coverImageSrc}" alt="Cover preview" class="w-100 rounded" style="max-height: 300px; object-fit: cover;">
                    <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-end" style="background: linear-gradient(transparent, rgba(0,0,0,0.6));">
                        <div class="p-4 text-white">
                            <h1 class="display-4 mb-2">${title || 'Your Adventure Title'}</h1>
                            ${subtitle ? `<p class="lead mb-0">${subtitle}</p>` : ''}
                        </div>
                    </div>
                </div>
            `;
        } else {
            coverImageHtml = `
                <div class="bg-primary text-white p-4 rounded mb-4">
                    <h1 class="display-4 mb-2">${title || 'Your Adventure Title'}</h1>
                    ${subtitle ? `<p class="lead mb-0">${subtitle}</p>` : ''}
                </div>
            `;
        }
        
        // Generate preview HTML
        const previewHTML = `
            <div class="post-preview">
                ${coverImageHtml}
                
                <div class="row">
                    <div class="col-lg-8">
                        <div class="adventure-content">
                            <h3><i class="fas fa-book text-primary"></i> Adventure Story</h3>
                            <div class="content-text mb-4">
                                ${formattedContent || '<em class="text-muted">No content provided yet...</em>'}
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-header bg-light">
                                <h5 class="mb-0"><i class="fas fa-info-circle"></i> Adventure Details</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <strong>Difficulty:</strong><br>
                                    <span class="badge bg-warning text-dark fs-6">
                                        ${difficultyStars} ${difficultyLabels[difficulty] || 'Not set'}
                                    </span>
                                </div>
                                <div class="mb-3">
                                    <strong>Status:</strong><br>
                                    <span class="badge bg-warning">Pending Review</span>
                                </div>
                                <div class="mb-3">
                                    <strong>Author:</strong><br>
                                    {{ current_user.nickname }}
                                </div>
                                <div>
                                    <strong>Created:</strong><br>
                                    Today
                                </div>
                            </div>
                        </div>
                        
                        <div class="card mt-3">
                            <div class="card-header bg-info text-white">
                                <h6 class="mb-0"><i class="fas fa-map-marked-alt"></i> Route Information</h6>
                            </div>
                            <div class="card-body">
                                ${document.getElementById('gpx_file').files.length > 0 ? 
                                    '<div class="alert alert-success small"><i class="fas fa-check"></i> GPS track will be displayed on map</div>' : 
                                    '<div class="alert alert-info small"><i class="fas fa-info"></i> No GPS track uploaded</div>'
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Show preview in modal
        showModal('Adventure Preview', previewHTML);
    }
    
    function showModal(title, content) {
        // Create modal if it doesn't exist
        let modal = document.getElementById('previewModal');
        if (!modal) {
            modal = document.createElement('div');
            modal.innerHTML = `
                <div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-xl">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="previewModalLabel">
                                    <i class="fas fa-eye"></i> ${title}
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div id="previewContent">${content}</div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                    <i class="fas fa-times"></i> Close Preview
                                </button>
                                <button type="button" class="btn btn-success" onclick="document.getElementById('createPostForm').submit()">
                                    <i class="fas fa-paper-plane"></i> Looks Good - Share Adventure
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            document.body.appendChild(modal);
        } else {
            document.getElementById('previewContent').innerHTML = content;
            document.getElementById('previewModalLabel').innerHTML = `<i class="fas fa-eye"></i> ${title}`;
        }
        
        // Show the modal
        const bootstrapModal = new bootstrap.Modal(document.getElementById('previewModal'));
        bootstrapModal.show();
    }
});
</script>
{% endblock %}