{% extends "base.html" %}

{% block title %}{% if category %}Edit Category{% else %}New Category{% endif %} - Vim Docs{% endblock %}

{% block header_title %}{% if category %}Edit Category{% else %}New Category{% endif %}{% endblock %}

{% block header_actions %}
<button id="save-category" class="inline-flex items-center px-4 py-2 bg-primary text-black rounded-md hover:bg-primary-dark transition-colors">
    <i class="mdi mdi-content-save mr-2"></i> Save
</button>
{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <div class="bg-gray-800 rounded-lg p-6 shadow-lg">
        <div class="grid grid-cols-1 gap-6">
            <div>
                <label for="category-name" class="block text-sm font-medium text-gray-400 mb-1">Category Name *</label>
                <input type="text" id="category-name" value="{% if category %}{{ category.name }}{% endif %}" 
                       class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
            </div>
            
            <div>
                <label for="category-icon" class="block text-sm font-medium text-gray-400 mb-1">Icon (Material Design Icon)</label>
                <div class="relative">
                    <div class="flex items-center">
                        <div class="icon-preview w-10 h-10 flex items-center justify-center bg-gray-700 rounded-md mr-3">
                            <i id="icon-preview" class="mdi mdi-folder-outline text-xl"></i>
                        </div>
                        <input type="text" id="category-icon" value="{% if category %}{{ category.icon }}{% else %}mdi-folder-outline{% endif %}" 
                               class="flex-1 px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
                        <button type="button" id="icon-search-btn" class="ml-2 px-3 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-500">
                            <i class="mdi mdi-magnify"></i>
                        </button>
                    </div>
                    
                    <!-- Icon Search Modal -->
                    <div id="icon-search-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
                        <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">
                                <div class="absolute inset-0 bg-gray-900 opacity-75"></div>
                            </div>
                            <div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
                                <div class="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                                    <div class="mt-3 text-center sm:mt-0 sm:text-left">
                                        <h3 class="text-lg leading-6 font-medium text-white mb-4">
                                            Select an Icon
                                        </h3>
                                        <div class="mt-2">
                                            <!-- Search Input -->
                                            <div class="mb-4">
                                                <input type="text" id="icon-search-input" placeholder="Search icons..." 
                                                       class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
                                            </div>
                                            
                                            <!-- Icons Grid -->
                                            <div id="icons-grid" class="grid grid-cols-6 gap-2 max-h-96 overflow-y-auto">
                                                <!-- Icons will be populated dynamically -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                                    <button type="button" id="close-icon-modal" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-600 shadow-sm px-4 py-2 bg-gray-700 text-white hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                                        Close
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="text-sm text-gray-500 mt-1">Example: mdi-folder-outline, mdi-code-tags, mdi-book-open-page-variant</p>
            </div>
            
            <div>
                <label for="category-description" class="block text-sm font-medium text-gray-400 mb-1">Description</label>
                <textarea id="category-description" rows="3" 
                          class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">{% if category %}{{ category.description }}{% endif %}</textarea>
            </div>
            
            <div>
                <label for="category-parent" class="block text-sm font-medium text-gray-400 mb-1">Parent Category</label>
                <select id="category-parent" 
                        class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
                    <option value="">None (Root Category)</option>
                    <!-- Options will be populated with JavaScript -->
                </select>
            </div>
        </div>
    </div>
</div>

<!-- Save notification -->
<div id="save-notification" class="fixed bottom-4 right-4 bg-green-500/90 text-white px-4 py-2 rounded-md shadow-lg transform translate-y-16 opacity-0 transition-all duration-300 flex items-center">
    <i class="mdi mdi-check-circle mr-2"></i>
    <span>Category saved successfully!</span>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const saveButton = document.getElementById('save-category');
        const nameInput = document.getElementById('category-name');
        const iconInput = document.getElementById('category-icon');
        const descriptionInput = document.getElementById('category-description');
        const parentSelect = document.getElementById('category-parent');
        const notification = document.getElementById('save-notification');
        
        // Load all categories for parent selection
        loadCategoryOptions();
        
        // Set default parent if specified
        {% if parent %}
        const parentId = {{ parent.id }};
        {% endif %}
        
        function loadCategoryOptions() {
            fetch('/api/categories')
                .then(response => response.json())
                .then(categories => {
                    // Find the root category
                    const rootCategory = categories.find(c => c.name === 'root');
                    
                    // Add options recursively
                    function addCategoryOptions(categories, depth = 0) {
                        categories.forEach(category => {
                            // Skip the category being edited to avoid circular references
                            {% if category %}
                            if (category.id === {{ category.id }}) return;
                            {% endif %}
                            
                            const option = document.createElement('option');
                            option.value = category.id;
                            
                            // Add indentation using spaces for hierarchical display
                            const indent = '\u00A0\u00A0\u00A0\u00A0'.repeat(depth);
                            option.textContent = indent + (depth > 0 ? '└─ ' : '') + category.name;
                            
                            // Select option logic:
                            // 1. If we have a parent specified, select that parent
                            // 2. If we're editing an existing category, select its current parent
                            // 3. If creating a new category, select root by default
                            let selectThisOption = false;
                            
                            {% if parent %}
                            if (category.id === {{ parent.id }}) {
                                selectThisOption = true;
                            }
                            {% elif category and category.parent_id %}
                            if (category.id === {{ category.parent_id }}) {
                                selectThisOption = true;
                            }
                            {% else %}
                            // If no parent specified and creating new category, default to root
                            if (category.is_root && !rootSelected) {
                                selectThisOption = true;
                                rootSelected = true;
                            }
                            {% endif %}
                            
                            option.selected = selectThisOption;
                            parentSelect.appendChild(option);
                            
                            if (category.children && category.children.length > 0) {
                                addCategoryOptions(category.children, depth + 1);
                            }
                        });
                    }
                    
                    // Initialize flag to track if root has been selected
                    let rootSelected = false;
                    
                    // Start from root categories
                    addCategoryOptions(categories);
                })
                .catch(error => {
                    console.error('Error loading categories:', error);
                });
        }
        
        saveButton.addEventListener('click', function() {
            const categoryData = {
                name: nameInput.value.trim(),
                icon: iconInput.value.trim() || 'mdi-folder-outline',
                description: descriptionInput.value.trim(),
                parent_id: parentSelect.value || null
            };
            
            // Validation
            if (!categoryData.name) {
                alert('Please enter a category name');
                nameInput.focus();
                return;
            }
            
            {% if category %}
            categoryData.id = {{ category.id }};
            {% endif %}
            
            fetch('/api/category', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token() }}'
                },
                body: JSON.stringify(categoryData)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Server responded with an error: ' + response.status);
                }
                return response.json();
            })
            .then(data => {
                console.log("Category saved successfully:", data);
                
                // Show save notification
                notification.classList.remove('translate-y-16', 'opacity-0');
                
                // Hide notification after 3 seconds
                setTimeout(() => {
                    notification.classList.add('translate-y-16', 'opacity-0');
                }, 3000);
                
                // Redirect to category view
                setTimeout(() => {
                    window.location.href = `/category/${data.id}`;
                }, 1000);
            })
            .catch(error => {
                console.error('Error saving category:', error);
                alert('Error saving category: ' + error.message);
            });
        });

        // Icon Preview Functionality
        const iconPreview = document.getElementById('icon-preview');
        
        // Update icon preview when input changes
        function updateIconPreview() {
            const iconClass = iconInput.value.trim();
            
            // Remove all mdi classes
            iconPreview.className = '';
            
            // Add the mdi base class and the selected icon class
            iconPreview.classList.add('mdi');
            
            // If the value doesn't start with mdi-, add it
            if (iconClass.startsWith('mdi-')) {
                iconPreview.classList.add(iconClass);
            } else if (iconClass) {
                iconPreview.classList.add('mdi-' + iconClass.replace('mdi-', ''));
            } else {
                iconPreview.classList.add('mdi-folder-outline');
            }
        }
        
        // Initial preview
        updateIconPreview();
        
        // Update preview on input change
        iconInput.addEventListener('input', updateIconPreview);
        
        // Icon Search Modal
        const iconSearchBtn = document.getElementById('icon-search-btn');
        const iconSearchModal = document.getElementById('icon-search-modal');
        const closeIconModal = document.getElementById('close-icon-modal');
        const iconSearchInput = document.getElementById('icon-search-input');
        const iconsGrid = document.getElementById('icons-grid');
        
        // Common Material Design Icons
        const commonIcons = [
            'mdi-folder-outline', 'mdi-folder', 'mdi-folder-open', 'mdi-folder-plus', 
            'mdi-file-document-outline', 'mdi-file-document', 'mdi-file', 
            'mdi-note-outline', 'mdi-note', 'mdi-notebook', 'mdi-notebook-outline',
            'mdi-code-tags', 'mdi-code-braces', 'mdi-console', 'mdi-database', 
            'mdi-server', 'mdi-desktop-tower', 'mdi-monitor', 'mdi-laptop',
            'mdi-home', 'mdi-account', 'mdi-cog', 'mdi-star', 'mdi-heart',
            'mdi-book', 'mdi-book-open', 'mdi-bookshelf', 'mdi-bookmark',
            'mdi-alert', 'mdi-information', 'mdi-help-circle', 'mdi-check-circle',
            'mdi-tools', 'mdi-wrench', 'mdi-hammer', 'mdi-screwdriver',
            'mdi-shield', 'mdi-lock', 'mdi-key', 'mdi-wifi', 'mdi-web',
            'mdi-link', 'mdi-github', 'mdi-git', 'mdi-docker', 'mdi-language-python',
            'mdi-language-javascript', 'mdi-language-html5', 'mdi-language-css3',
            'mdi-chart-bar', 'mdi-chart-line', 'mdi-chart-pie', 'mdi-chart-bubble',
            'mdi-movie', 'mdi-music', 'mdi-image', 'mdi-camera', 'mdi-video',
            'mdi-atom', 'mdi-microscope', 'mdi-flask', 'mdi-test-tube',
            'mdi-robot', 'mdi-brain', 'mdi-bug', 'mdi-rocket', 'mdi-satellite',
            'mdi-car', 'mdi-airplane', 'mdi-train', 'mdi-bike', 'mdi-walk',
            'mdi-food', 'mdi-coffee', 'mdi-beer', 'mdi-pizza', 'mdi-cake',
            'mdi-currency-usd', 'mdi-cash', 'mdi-credit-card', 'mdi-bank',
            'mdi-message', 'mdi-email', 'mdi-chat', 'mdi-forum', 'mdi-comment',
            'mdi-calendar', 'mdi-clock', 'mdi-alarm', 'mdi-timer', 'mdi-watch',
            'mdi-weather-sunny', 'mdi-weather-night', 'mdi-weather-rainy', 'mdi-weather-snowy',
            'mdi-map', 'mdi-map-marker', 'mdi-compass', 'mdi-earth', 'mdi-directions',
            'mdi-shopping', 'mdi-cart', 'mdi-store', 'mdi-tag', 'mdi-sale',
            'mdi-palette', 'mdi-brush', 'mdi-format-paint', 'mdi-pencil', 'mdi-pen',
            'mdi-printer', 'mdi-scanner', 'mdi-fax', 'mdi-file-pdf', 'mdi-file-excel',
            'mdi-file-word', 'mdi-file-powerpoint', 'mdi-file-image', 'mdi-file-video',
            'mdi-file-music', 'mdi-file-xml', 'mdi-file-code', 'mdi-zip-box'
        ];
        
        // Populate the icons grid
        function populateIconsGrid(searchTerm = '') {
            iconsGrid.innerHTML = '';
            
            const filteredIcons = searchTerm 
                ? commonIcons.filter(icon => icon.toLowerCase().includes(searchTerm.toLowerCase())) 
                : commonIcons;
            
            filteredIcons.forEach(icon => {
                const iconDiv = document.createElement('div');
                iconDiv.className = 'cursor-pointer p-2 bg-gray-700 rounded-md flex flex-col items-center hover:bg-gray-600';
                
                const iconEl = document.createElement('i');
                iconEl.className = 'mdi ' + icon + ' text-2xl mb-1';
                
                const iconName = document.createElement('div');
                iconName.className = 'text-xs text-gray-400 truncate w-full text-center';
                iconName.textContent = icon.replace('mdi-', '');
                
                iconDiv.appendChild(iconEl);
                iconDiv.appendChild(iconName);
                
                // Select icon when clicked
                iconDiv.addEventListener('click', function() {
                    iconInput.value = icon;
                    updateIconPreview();
                    iconSearchModal.classList.add('hidden');
                });
                
                iconsGrid.appendChild(iconDiv);
            });
        }
        
        // Open modal
        iconSearchBtn.addEventListener('click', function() {
            populateIconsGrid();
            iconSearchModal.classList.remove('hidden');
            iconSearchInput.focus();
        });
        
        // Close modal
        closeIconModal.addEventListener('click', function() {
            iconSearchModal.classList.add('hidden');
        });
        
        // Click outside to close
        iconSearchModal.addEventListener('click', function(e) {
            if (e.target === iconSearchModal) {
                iconSearchModal.classList.add('hidden');
            }
        });
        
        // Search functionality
        iconSearchInput.addEventListener('input', function() {
            populateIconsGrid(this.value);
        });
    });
</script>
{% endblock %}