@extends('layouts.campaign')

@section('title', 'Demostración de Colores - GoberData')

@section('app-name', 'GoberData')

@section('nav-links')
    <a href="{{ url('/admin/dashboard') }}" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
    <a href="{{ url('/campaigns/10/settings') }}" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium">Configuración</a>
    <a href="{{ url('/demo-colors') }}" class="text-gray-500 hover:text-gray-700 px-3 py-2 rounded-md text-sm font-medium">Demo Colores</a>
@endsection

@section('user-menu')
    <div class="flex items-center space-x-4">
        <span class="text-sm text-gray-700">admin@campaign.com</span>
        <button class="btn-primary">Perfil</button>
        <button class="btn-secondary">Salir</button>
    </div>
@endsection

@section('content')
<div class="space-y-8">
    <!-- Header -->
    <div class="text-center">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">🎨 Demostración de Colores de Campaña</h1>
        <p class="text-xl text-gray-600">Los colores se aplican dinámicamente a toda la interfaz</p>
    </div>

    <!-- Color Info -->
    <div class="card">
        <h2 class="text-2xl font-bold mb-4">Información del Tema Actual</h2>
        <div id="themeInfo" class="grid md:grid-cols-3 gap-4">
            <div class="text-center">
                <div class="w-16 h-16 rounded-full mx-auto mb-2" style="background-color: var(--primary-color, #3B82F6)"></div>
                <p class="font-semibold">Color Primario</p>
                <p class="text-sm text-gray-600" id="primaryColorText">#3B82F6</p>
            </div>
            <div class="text-center">
                <div class="w-16 h-16 rounded-full mx-auto mb-2" style="background-color: var(--secondary-color, #10B981)"></div>
                <p class="font-semibold">Color Secundario</p>
                <p class="text-sm text-gray-600" id="secondaryColorText">#10B981</p>
            </div>
            <div class="text-center">
                <div class="w-16 h-16 mx-auto mb-2 campaign-logo bg-gray-200 rounded"></div>
                <p class="font-semibold">Logo</p>
                <p class="text-sm text-gray-600" id="logoText">Sin logo</p>
            </div>
        </div>
    </div>

    <!-- Buttons Demo -->
    <div class="card">
        <h2 class="text-2xl font-bold mb-4">Botones</h2>
        <div class="flex flex-wrap gap-4">
            <button class="btn-primary">Botón Primario</button>
            <button class="btn-secondary">Botón Secundario</button>
            <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg">Botón Indigo</button>
            <button class="bg-green-600 text-white px-4 py-2 rounded-lg">Botón Verde</button>
            <button class="bg-gradient-primary text-white px-4 py-2 rounded-lg">Gradiente Primario</button>
            <button class="bg-gradient-secondary text-white px-4 py-2 rounded-lg">Gradiente Secundario</button>
        </div>
    </div>

    <!-- Cards Demo -->
    <div class="grid md:grid-cols-2 gap-6">
        <div class="card card-primary">
            <h3 class="text-xl font-bold mb-2">Tarjeta Primaria</h3>
            <p class="text-gray-600">Esta tarjeta tiene un borde izquierdo con el color primario de la campaña.</p>
        </div>
        <div class="card card-secondary">
            <h3 class="text-xl font-bold mb-2">Tarjeta Secundaria</h3>
            <p class="text-gray-600">Esta tarjeta tiene un borde izquierdo con el color secundario de la campaña.</p>
        </div>
    </div>

    <!-- Navigation Tabs Demo -->
    <div class="card">
        <h2 class="text-2xl font-bold mb-4">Pestañas de Navegación</h2>
        <div class="flex space-x-1 border-b">
            <div class="nav-tab nav-tab-active">General</div>
            <div class="nav-tab">APIs</div>
            <div class="nav-tab">Equipo</div>
            <div class="nav-tab">Marca</div>
        </div>
    </div>

    <!-- Forms Demo -->
    <div class="card">
        <h2 class="text-2xl font-bold mb-4">Formularios</h2>
        <div class="grid md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Campo de Texto</label>
                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Escribe algo...">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Selector</label>
                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option>Opción 1</option>
                    <option>Opción 2</option>
                    <option>Opción 3</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Status Indicators Demo -->
    <div class="card">
        <h2 class="text-2xl font-bold mb-4">Indicadores de Estado</h2>
        <div class="flex flex-wrap gap-4">
            <div class="flex items-center space-x-2">
                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                <span class="status-success">Estado Exitoso</span>
            </div>
            <div class="flex items-center space-x-2">
                <div class="w-3 h-3 rounded-full bg-blue-500"></div>
                <span class="status-info">Estado Informativo</span>
            </div>
            <div class="flex items-center space-x-2">
                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                <span class="text-yellow-600">Estado Advertencia</span>
            </div>
            <div class="flex items-center space-x-2">
                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                <span class="text-red-600">Estado Error</span>
            </div>
        </div>
    </div>

    <!-- Links Demo -->
    <div class="card">
        <h2 class="text-2xl font-bold mb-4">Enlaces</h2>
        <div class="space-y-2">
            <p><a href="#" class="link-primary">Enlace Primario</a> - Usa el color primario de la campaña</p>
            <p><a href="#" class="text-indigo-600 hover:text-indigo-800">Enlace Indigo</a> - Usa el color indigo estándar</p>
            <p><a href="#" class="text-green-600 hover:text-green-800">Enlace Verde</a> - Usa el color verde estándar</p>
        </div>
    </div>

    <!-- Test Buttons -->
    <div class="card">
        <h2 class="text-2xl font-bold mb-4">Probar Cambios de Color</h2>
        <div class="flex flex-wrap gap-4">
            <button onclick="testColorChange('#FF0000', '#00FF00')" class="btn-primary">Rojo/Verde</button>
            <button onclick="testColorChange('#8B5CF6', '#F59E0B')" class="btn-secondary">Púrpura/Naranja</button>
            <button onclick="testColorChange('#EF4444', '#3B82F6')" class="bg-red-500 text-white px-4 py-2 rounded-lg">Rojo/Azul</button>
            <button onclick="resetColors()" class="bg-gray-500 text-white px-4 py-2 rounded-lg">Resetear</button>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Update theme info display
    function updateThemeInfo() {
        if (window.campaignTheme) {
            const theme = window.campaignTheme.getThemeInfo();
            document.getElementById('primaryColorText').textContent = theme.primaryColor || '#3B82F6';
            document.getElementById('secondaryColorText').textContent = theme.secondaryColor || '#10B981';
            document.getElementById('logoText').textContent = theme.logoUrl || 'Sin logo';
        }
    }

    // Test color changes
    function testColorChange(primary, secondary) {
        if (window.campaignTheme) {
            window.campaignTheme.updateColors(primary, secondary, null);
            updateThemeInfo();
        }
    }

    // Reset colors
    function resetColors() {
        if (window.campaignTheme) {
            window.campaignTheme.updateColors('#3B82F6', '#10B981', null);
            updateThemeInfo();
        }
    }

    // Update theme info when theme changes
    window.addEventListener('campaignThemeUpdated', updateThemeInfo);

    // Initial update
    document.addEventListener('DOMContentLoaded', () => {
        setTimeout(updateThemeInfo, 1000); // Wait for theme to load
    });
</script>
@endsection