292 lines
14 KiB
PHP
292 lines
14 KiB
PHP
@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 NetGesCon</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("superadmin.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("superadmin.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
|