@extends('layouts.app')

@section('content')
<div class="container mx-auto px-6 py-8 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">Impostazioni Personalizzazione</h1>
        <p class="text-gray-600 dark:text-gray-400 mt-2">Personalizza i colori e il tema dell'interfaccia</p>
    </div>

    <!-- Messaggi di successo/errore -->
    <div id="message-container" class="hidden mb-6">
        <div id="success-message" class="bg-green-100 dark:bg-green-900 border border-green-400 dark:border-green-600 text-green-700 dark:text-green-300 px-4 py-3 rounded mb-4 hidden">
            <span id="success-text"></span>
        </div>
        <div id="error-message" class="bg-red-100 dark:bg-red-900 border border-red-400 dark:border-red-600 text-red-700 dark:text-red-300 px-4 py-3 rounded mb-4 hidden">
            <span id="error-text"></span>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Pannello di controllo colori -->
        <div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow">
            <h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Personalizzazione Colori</h2>
            
            <form id="color-form" class="space-y-4">
                @csrf
                <!-- Dark Mode Toggle -->
                <div class="flex items-center justify-between">
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Modalità Scura</label>
                    <input type="checkbox" id="dark_mode" name="dark_mode" value="true" 
                           {{ $settings['dark_mode'] === 'true' ? 'checked' : '' }}
                           class="w-4 h-4 text-indigo-600 bg-gray-100 border-gray-300 rounded focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                </div>

                <!-- Colori Principale -->
                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mt-6">Tema Principale</h3>
                
                <div class="grid grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Sfondo</label>
                        <input type="color" id="bg_color" name="bg_color" value="{{ $settings['bg_color'] }}" 
                               class="w-full h-10 rounded border border-gray-300 dark:border-gray-600">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Testo</label>
                        <input type="color" id="text_color" name="text_color" value="{{ $settings['text_color'] }}" 
                               class="w-full h-10 rounded border border-gray-300 dark:border-gray-600">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Accento</label>
                        <input type="color" id="accent_color" name="accent_color" value="{{ $settings['accent_color'] }}" 
                               class="w-full h-10 rounded border border-gray-300 dark:border-gray-600">
                    </div>
                </div>

                <!-- Colori Sidebar -->
                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mt-6">Sidebar</h3>
                
                <div class="grid grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Sfondo Sidebar</label>
                        <input type="color" id="sidebar_bg_color" name="sidebar_bg_color" value="{{ $settings['sidebar_bg_color'] }}" 
                               class="w-full h-10 rounded border border-gray-300 dark:border-gray-600">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Testo Sidebar</label>
                        <input type="color" id="sidebar_text_color" name="sidebar_text_color" value="{{ $settings['sidebar_text_color'] }}" 
                               class="w-full h-10 rounded border border-gray-300 dark:border-gray-600">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Accento Sidebar</label>
                        <input type="color" id="sidebar_accent_color" name="sidebar_accent_color" value="{{ $settings['sidebar_accent_color'] }}" 
                               class="w-full h-10 rounded border border-gray-300 dark:border-gray-600">
                    </div>
                </div>

                <!-- Temi Predefiniti -->
                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mt-6">Temi Predefiniti</h3>
                <div class="flex flex-wrap gap-2">
                    <button type="button" class="theme-btn px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600" data-theme="default">Default</button>
                    <button type="button" class="theme-btn px-4 py-2 rounded bg-gray-800 text-white hover:bg-gray-900" data-theme="dark">Dark</button>
                    <button type="button" class="theme-btn px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700" data-theme="ocean">Ocean</button>
                </div>

                <!-- Pulsanti di controllo -->
                <div class="flex gap-4 mt-6">
                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                        Salva Impostazioni
                    </button>
                    <button type="button" id="reset-btn" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                        Reset
                    </button>
                </div>
            </form>
        </div>

        <!-- Anteprima -->
        <div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow">
            <h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Anteprima</h2>
            
            <div id="preview-container" class="border rounded-lg p-4 transition-all duration-300" style="background-color: {{ $settings['bg_color'] }}; color: {{ $settings['text_color'] }};">
                <div class="mb-4">
                    <h3 class="text-lg font-bold">Dashboard Amministratore</h3>
                    <p class="text-sm opacity-75">Benvenuto nel pannello di amministrazione</p>
                </div>
                
                <!-- Simulazione sidebar -->
                <div class="flex gap-4">
                    <div id="sidebar-preview" class="w-32 h-40 rounded p-2 transition-all duration-300" style="background-color: {{ $settings['sidebar_bg_color'] }}; color: {{ $settings['sidebar_text_color'] }};">
                        <div class="text-xs font-bold mb-2">Menu</div>
                        <div class="space-y-1">
                            <div class="text-xs p-1 rounded" style="background-color: {{ $settings['sidebar_accent_color'] }}; opacity: 0.3;">Dashboard</div>
                            <div class="text-xs p-1">Stabili</div>
                            <div class="text-xs p-1">Utenti</div>
                        </div>
                    </div>
                    
                    <!-- Contenuto principale -->
                    <div class="flex-1">
                        <div class="mb-2">
                            <div class="w-full h-6 rounded" style="background-color: {{ $settings['accent_color'] }}; opacity: 0.2;"></div>
                        </div>
                        <div class="space-y-2">
                            <div class="w-3/4 h-4 rounded" style="background-color: {{ $settings['text_color'] }}; opacity: 0.2;"></div>
                            <div class="w-1/2 h-4 rounded" style="background-color: {{ $settings['text_color'] }}; opacity: 0.1;"></div>
                        </div>
                    </div>
                </div>
                
                <!-- Pulsante di esempio -->
                <button class="mt-4 px-4 py-2 rounded text-white transition-all duration-300" style="background-color: {{ $settings['accent_color'] }};">
                    Pulsante di Esempio
                </button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('color-form');
    const preview = document.getElementById('preview-container');
    const sidebarPreview = document.getElementById('sidebar-preview');
    const colorInputs = form.querySelectorAll('input[type="color"], input[type="checkbox"]');
    const themeButtons = document.querySelectorAll('.theme-btn');
    const resetBtn = document.getElementById('reset-btn');

    // Applica dark mode se salvato
    if (document.getElementById('dark_mode').checked) {
        document.documentElement.classList.add('dark');
    }

    // Aggiorna anteprima in tempo reale
    function updatePreview() {
        const bgColor = document.getElementById('bg_color').value;
        const textColor = document.getElementById('text_color').value;
        const accentColor = document.getElementById('accent_color').value;
        const sidebarBgColor = document.getElementById('sidebar_bg_color').value;
        const sidebarTextColor = document.getElementById('sidebar_text_color').value;
        const sidebarAccentColor = document.getElementById('sidebar_accent_color').value;
        const darkMode = document.getElementById('dark_mode').checked;

        preview.style.backgroundColor = bgColor;
        preview.style.color = textColor;
        sidebarPreview.style.backgroundColor = sidebarBgColor;
        sidebarPreview.style.color = sidebarTextColor;
        
        // Aggiorna pulsante e accent
        const button = preview.querySelector('button');
        button.style.backgroundColor = accentColor;
        
        const accentDiv = sidebarPreview.querySelector('[style*="background-color"]');
        if (accentDiv) {
            accentDiv.style.backgroundColor = sidebarAccentColor;
        }

        // Aggiorna dark mode
        if (darkMode) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    }

    // Event listeners per anteprima in tempo reale
    colorInputs.forEach(input => {
        input.addEventListener('input', updatePreview);
        input.addEventListener('change', updatePreview);
    });

    // Temi predefiniti
    themeButtons.forEach(btn => {
        btn.addEventListener('click', async function() {
            const theme = this.dataset.theme;
            
            try {
                const response = await fetch('{{ route("admin.impostazioni.theme") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({ theme: theme })
                });

                const data = await response.json();
                
                if (data.success && data.settings) {
                    // Aggiorna i campi del form
                    Object.keys(data.settings).forEach(key => {
                        const input = document.getElementById(key);
                        if (input) input.value = data.settings[key];
                    });
                    
                    updatePreview();
                    showMessage('Tema applicato con successo!', 'success');
                    
                    // Ricarica la pagina per applicare completamente il tema
                    setTimeout(() => window.location.reload(), 1000);
                }
            } catch (error) {
                showMessage('Errore nell\'applicazione del tema', 'error');
            }
        });
    });

    // Salvataggio del form
    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        
        try {
            const response = await fetch('{{ route("admin.impostazioni.store") }}', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();
            
            if (data.success) {
                showMessage(data.message, 'success');
                // Ricarica la pagina per applicare le modifiche
                setTimeout(() => window.location.reload(), 1000);
            } else {
                showMessage('Errore nel salvataggio delle impostazioni', 'error');
            }
        } catch (error) {
            showMessage('Errore nel salvataggio delle impostazioni', 'error');
        }
    });

    // Reset
    resetBtn.addEventListener('click', function() {
        if (confirm('Sei sicuro di voler ripristinare le impostazioni predefinite?')) {
            themeButtons[0].click(); // Applica tema default
        }
    });

    function showMessage(message, type) {
        const messageContainer = document.getElementById('message-container');
        const successDiv = document.getElementById('success-message');
        const errorDiv = document.getElementById('error-message');
        const successText = document.getElementById('success-text');
        const errorText = document.getElementById('error-text');

        // Nascondi tutti i messaggi
        successDiv.classList.add('hidden');
        errorDiv.classList.add('hidden');

        if (type === 'success') {
            successText.textContent = message;
            successDiv.classList.remove('hidden');
        } else {
            errorText.textContent = message;
            errorDiv.classList.remove('hidden');
        }

        messageContainer.classList.remove('hidden');

        // Nascondi dopo 5 secondi
        setTimeout(() => {
            messageContainer.classList.add('hidden');
        }, 5000);
    }

    // Anteprima iniziale
    updatePreview();
});
</script>
@endsection