{% extends 'admin/base.html' %}
{% load static %}

{% block title %}Branding Settings - Admin Panel{% endblock %}

{% block extra_css %}
<style>
    .preview-container {
        background: linear-gradient(135deg, #f8fafc, #e2e8f0);
        border: 2px dashed #cbd5e1;
        border-radius: 12px;
        padding: 20px;
        margin-top: 16px;
    }
    
    .preview-card {
        background: white;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
        transition: all 0.3s ease;
    }
    
    .preview-card:hover {
        transform: translateY(-1px);
    }
    
    .logo-preview {
        max-height: 60px;
        max-width: 200px;
        object-fit: contain;
    }
    
    .favicon-preview {
        width: 32px;
        height: 32px;
        object-fit: contain;
    }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gray-50">
    <!-- Header -->
    <div class="bg-white shadow-sm border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between py-4">
                <div class="flex-1 min-w-0">
                    <h1 class="text-2xl font-bold text-gray-900 flex items-center">
                        <i class="fas fa-palette text-purple-600 mr-3"></i>
                        Branding Settings
                    </h1>
                    <p class="mt-1 text-sm text-gray-500">Kelola identitas dan branding website</p>
                </div>
                <div class="mt-4 sm:mt-0 flex space-x-3">
                    <a href="{% url 'admin_panel:website_dashboard' %}" 
                       class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
                        <i class="fas fa-th-large mr-2"></i>
                        Dashboard
                    </a>
                    <a href="{% url 'admin_panel:dashboard' %}" 
                       class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Kembali
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <form method="POST" enctype="multipart/form-data" class="space-y-6" id="branding-form">
            {% csrf_token %}
            
            <!-- Branding Settings -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <div class="bg-gradient-to-r from-purple-600 to-pink-600 px-6 py-8">
                    <h3 class="text-lg font-semibold text-white flex items-center">
                        <i class="fas fa-palette mr-2"></i>
                        Branding & Identity
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div>
                            <label for="site_name" class="block text-sm font-medium text-gray-700 mb-2">
                                Nama Website <span class="text-red-500">*</span>
                            </label>
                            <input type="text" 
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" 
                                   id="site_name" 
                                   name="site_name" 
                                   value="{{ settings.site_name|default:'HMI' }}"
                                   required>
                        </div>
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email Kontak</label>
                            <input type="email" 
                                   class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" 
                                   id="email" 
                                   name="email" 
                                   value="{{ settings.email|default:'' }}">
                        </div>
                    </div>
                    
                    <!-- Gambar & Media -->
                    <div class="mt-6">
                        <h4 class="text-md font-semibold text-gray-700 mb-4 flex items-center">
                            <i class="fas fa-images mr-2 text-purple-600"></i>
                            Gambar & Media Organisasi
                        </h4>
                        
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <!-- Favicon -->
                            <div>
                                <label for="favicon" class="block text-sm font-medium text-gray-700 mb-2">
                                    Favicon <span class="text-gray-500 text-xs">(16x16 atau 32x32px)</span>
                                </label>
                                <input type="file" 
                                       class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" 
                                       id="favicon" 
                                       name="favicon" 
                                       accept="image/*">
                                {% if settings.favicon %}
                                <div class="mt-2">
                                    <img src="{{ settings.favicon.url }}" alt="Current Favicon" class="favicon-preview">
                                    <p class="text-sm text-gray-500 mt-1">Favicon saat ini</p>
                                </div>
                                {% endif %}
                            </div>
                            
                            <!-- Logo Organisasi -->
                            <div>
                                <label for="logo" class="block text-sm font-medium text-gray-700 mb-2">
                                    Logo Organisasi <span class="text-gray-500 text-xs">(200x200px)</span>
                                </label>
                                <input type="file" 
                                       class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm" 
                                       id="logo" 
                                       name="logo" 
                                       accept="image/*">
                                {% if settings.logo %}
                                <div class="mt-2">
                                    <img src="{{ settings.logo.url }}" alt="Current Logo" class="h-24 w-auto object-contain rounded-lg">
                                    <p class="text-sm text-gray-500 mt-1">Logo saat ini</p>
                                </div>
                                {% else %}
                                <p class="text-sm text-gray-500 mt-2">Belum ada logo. Upload logo untuk menampilkan preview.</p>
                                {% endif %}
                            </div>
                        </div>
                        
                    </div>
                    
                    <!-- Branding Preview -->
                    <div class="mt-6">
                        <h4 class="text-md font-semibold text-gray-700 mb-3 flex items-center">
                            <i class="fas fa-eye mr-2 text-purple-600"></i>
                            Preview Branding
                        </h4>
                        <div class="preview-container">
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                                <!-- Favicon Preview -->
                                <div class="space-y-2">
                                    <h5 class="font-medium text-gray-700 text-sm">Favicon</h5>
                                    <div class="preview-card p-3">
                                        <img id="favicon-preview" 
                                             src="{% if settings.favicon %}{{ settings.favicon.url }}{% else %}{% static 'images/favicon-placeholder.svg' %}{% endif %}" 
                                             alt="Favicon Preview" 
                                             class="favicon-preview mx-auto">
                                    </div>
                                </div>
                                
                                <!-- Logo Preview -->
                                <div class="space-y-2">
                                    <h5 class="font-medium text-gray-700 text-sm">Logo</h5>
                                    <div class="preview-card p-3">
                                        <img id="logo-preview" 
                                             src="{% if settings.logo %}{{ settings.logo.url }}{% else %}{% static 'images/logo-placeholder.svg' %}{% endif %}" 
                                             alt="Logo Preview" 
                                             class="h-16 w-auto object-contain mx-auto">
                                    </div>
                                </div>
                                
                            </div>
                            
                            <!-- Header Preview -->
                            <div class="mt-6">
                                <h5 class="font-medium text-gray-700 mb-3">Header Preview</h5>
                                <div class="preview-card overflow-hidden">
                                    <div class="bg-gradient-to-r from-purple-600 to-pink-600 p-4">
                                        <div class="flex items-center justify-between text-white">
                                            <div class="flex items-center space-x-3">
                                                {% if settings.logo %}
                                                <img id="header-logo-preview" src="{{ settings.logo.url }}" alt="Logo" class="h-8 w-auto object-contain">
                                                {% else %}
                                                <img id="header-logo-preview" src="{% static 'images/logo-placeholder.svg' %}" alt="Logo" class="h-8 w-auto object-contain" style="display: none;">
                                                {% endif %}
                                                <span id="header-site-name-preview" class="font-bold text-lg">{{ settings.site_name|default:'HMI' }}</span>
                                            </div>
                                            <div class="flex space-x-4">
                                                <button class="px-3 py-1 bg-white bg-opacity-20 rounded text-sm hover:bg-opacity-30 transition-colors">Home</button>
                                                <button class="px-3 py-1 bg-white bg-opacity-20 rounded text-sm hover:bg-opacity-30 transition-colors">About</button>
                                                <button class="px-3 py-1 bg-white bg-opacity-20 rounded text-sm hover:bg-opacity-30 transition-colors">Contact</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="flex flex-col sm:flex-row justify-end space-y-3 sm:space-y-0 sm:space-x-3">
                <a href="{% url 'admin_panel:website_dashboard' %}" 
                   class="inline-flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                    <i class="fas fa-th-large mr-2"></i>
                    Dashboard
                </a>
                <button type="submit" 
                        class="inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
                    <i class="fas fa-save mr-2"></i>
                    Simpan Branding
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/preview-test.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Branding page loaded, starting preview setup...');
    
    // Wait a bit for all elements to be ready
    setTimeout(function() {
        console.log('Setting up image previews...');
        setupImagePreviews();
    }, 100);
    
    // Also try to setup again after a longer delay as fallback
    setTimeout(function() {
        console.log('Fallback: Setting up image previews again...');
        setupImagePreviews();
    }, 1000);
    
    // Site name preview update
    const siteNameInput = document.getElementById('site_name');
    const siteNamePreview = document.getElementById('site-name-preview');
    const headerSiteNamePreview = document.getElementById('header-site-name-preview');
    
    if (siteNameInput) {
        siteNameInput.addEventListener('input', function() {
            const value = this.value || 'HMI';
            if (siteNamePreview) siteNamePreview.textContent = value;
            if (headerSiteNamePreview) headerSiteNamePreview.textContent = value;
        });
    }
    
    function setupImagePreviews() {
        console.log('Setting up image preview functionality...');
        
        // Force re-setup by removing all existing listeners first
        const allFileInputs = document.querySelectorAll('input[type="file"]');
        allFileInputs.forEach(input => {
            // Clone the input to remove all event listeners
            const newInput = input.cloneNode(true);
            input.parentNode.replaceChild(newInput, input);
        });
        
        // Logo preview update
        const logoInput = document.getElementById('logo');
        const logoPreview = document.getElementById('logo-preview');
        const headerLogoPreview = document.getElementById('header-logo-preview');
        
        console.log('Logo elements:', { logoInput, logoPreview, headerLogoPreview });
        
        if (logoInput) {
            // Add multiple event listeners for better compatibility
            logoInput.addEventListener('change', handleLogoChange);
            logoInput.addEventListener('input', handleLogoChange);
            logoInput.addEventListener('drop', handleLogoChange);
            
            // Also add event listener to the parent container for drag & drop
            const logoContainer = logoInput.closest('div');
            if (logoContainer) {
                logoContainer.addEventListener('dragover', function(e) {
                    e.preventDefault();
                });
                logoContainer.addEventListener('drop', function(e) {
                    e.preventDefault();
                    if (e.dataTransfer.files.length > 0) {
                        logoInput.files = e.dataTransfer.files;
                        handleLogoChange({ target: logoInput });
                    }
                });
            }
            
            function handleLogoChange(e) {
                console.log('Logo file changed:', e.target.files);
                if (this.files && this.files[0]) {
                    console.log('Processing logo file:', this.files[0].name);
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        console.log('Logo file loaded, updating previews');
                        if (logoPreview) {
                            logoPreview.src = e.target.result;
                            logoPreview.style.display = 'block';
                            logoPreview.style.maxHeight = '60px';
                            logoPreview.style.maxWidth = '200px';
                            console.log('Logo preview updated');
                        }
                        if (headerLogoPreview) {
                            headerLogoPreview.src = e.target.result;
                            headerLogoPreview.style.display = 'block';
                            headerLogoPreview.style.height = '32px';
                            headerLogoPreview.style.width = 'auto';
                            console.log('Header logo preview updated');
                        }
                    };
                    reader.onerror = function(e) {
                        console.error('Error reading logo file:', e);
                    };
                    reader.readAsDataURL(this.files[0]);
                }
            }
        } else {
            console.error('Logo input element not found');
        }
        
        // Favicon preview update
        const faviconInput = document.getElementById('favicon');
        const faviconPreview = document.getElementById('favicon-preview');
        
        console.log('Favicon elements:', { faviconInput, faviconPreview });
        
        if (faviconInput) {
            // Add multiple event listeners for better compatibility
            faviconInput.addEventListener('change', handleFaviconChange);
            faviconInput.addEventListener('input', handleFaviconChange);
            faviconInput.addEventListener('drop', handleFaviconChange);
            
            // Also add event listener to the parent container for drag & drop
            const faviconContainer = faviconInput.closest('div');
            if (faviconContainer) {
                faviconContainer.addEventListener('dragover', function(e) {
                    e.preventDefault();
                });
                faviconContainer.addEventListener('drop', function(e) {
                    e.preventDefault();
                    if (e.dataTransfer.files.length > 0) {
                        faviconInput.files = e.dataTransfer.files;
                        handleFaviconChange({ target: faviconInput });
                    }
                });
            }
            
            function handleFaviconChange(e) {
                console.log('Favicon file changed:', e.target.files);
                if (this.files && this.files[0]) {
                    console.log('Processing favicon file:', this.files[0].name);
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        console.log('Favicon file loaded, updating preview');
                        if (faviconPreview) {
                            faviconPreview.src = e.target.result;
                            faviconPreview.style.display = 'block';
                            console.log('Favicon preview updated');
                        }
                    };
                    reader.onerror = function(e) {
                        console.error('Error reading favicon file:', e);
                    };
                    reader.readAsDataURL(this.files[0]);
                }
            }
        } else {
            console.error('Favicon input element not found');
        }
        
    }
    
    // Auto-save functionality
    const form = document.getElementById('branding-form');
    const inputs = form.querySelectorAll('input[type="text"], input[type="email"]');
    
    inputs.forEach(input => {
        input.addEventListener('blur', function() {
            // Auto-save on blur
            saveSettings();
        });
    });
    
    function saveSettings() {
        const formData = new FormData(form);
        
        fetch('{% url "admin_panel:save_website_settings" %}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            }
        })
        .then(response => response.json())
        .then(data => {
            console.log('Save response:', data);
            if (data.success) {
                // Show success message
                showNotification(data.message || 'Pengaturan berhasil disimpan!', 'success');
                
                // Update preview with new data
                if (data.data) {
                    if (data.data.site_name) {
                        const siteNamePreview = document.getElementById('site-name-preview');
                        const headerSiteNamePreview = document.getElementById('header-site-name-preview');
                        if (siteNamePreview) siteNamePreview.textContent = data.data.site_name;
                        if (headerSiteNamePreview) headerSiteNamePreview.textContent = data.data.site_name;
                    }
                    
                    if (data.data.logo_url) {
                        const logoPreview = document.getElementById('logo-preview');
                        const headerLogoPreview = document.getElementById('header-logo-preview');
                        if (logoPreview) logoPreview.src = data.data.logo_url;
                        if (headerLogoPreview) headerLogoPreview.src = data.data.logo_url;
                    }
                    
                    if (data.data.favicon_url) {
                        const faviconPreview = document.getElementById('favicon-preview');
                        if (faviconPreview) faviconPreview.src = data.data.favicon_url;
                    }
                    
                    if (data.data.logo_url) {
                        const logoPreview = document.getElementById('logo-preview');
                        if (logoPreview) logoPreview.src = data.data.logo_url;
                    }
                }
                
                // Clear file inputs after successful save
                const fileInputs = form.querySelectorAll('input[type="file"]');
                fileInputs.forEach(input => {
                    input.value = '';
                });
            } else {
                showNotification(data.message || 'Terjadi kesalahan saat menyimpan', 'error');
                console.error('Save error:', data.errors);
                if (data.debug) {
                    console.error('Debug info:', data.debug);
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('Terjadi kesalahan saat menyimpan pengaturan', 'error');
        });
    }
    
    function showNotification(message, type) {
        // Use global notification system from base.html
        if (window.showNotification) {
            window.showNotification(message, type, 4000);
        } else {
            console.log('Global notification system not available');
        }
    }
});
</script>
{% endblock %}