@extends('layouts.app')

@section('title', 'Theme Demo')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-primary mb-2">Theme Configuration Demo</h1>
            <p class="text-secondary">This page demonstrates the theme system with light/dark mode support.</p>
        </div>

        <!-- Color Palette -->
        <div class="card mb-8">
            <h2 class="text-2xl font-semibold mb-4">Color Palette</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div>
                    <div class="bg-primary h-20 rounded-lg mb-2"></div>
                    <p class="text-sm text-secondary">Primary</p>
                </div>
                <div>
                    <div class="h-20 rounded-lg mb-2" style="background-color: var(--color-secondary)"></div>
                    <p class="text-sm text-secondary">Secondary</p>
                </div>
                <div>
                    <div class="h-20 rounded-lg mb-2" style="background-color: var(--color-accent)"></div>
                    <p class="text-sm text-secondary">Accent</p>
                </div>
                <div>
                    <div class="bg-surface border border-default h-20 rounded-lg mb-2"></div>
                    <p class="text-sm text-secondary">Surface</p>
                </div>
            </div>
        </div>

        <!-- Buttons -->
        <div class="card mb-8">
            <h2 class="text-2xl font-semibold mb-4">Buttons</h2>
            <div class="flex flex-wrap gap-4">
                <button class="btn-primary">Primary Button</button>
                <button class="btn-secondary">Secondary Button</button>
                <button class="btn-primary" disabled style="opacity: 0.5; cursor: not-allowed;">Disabled Button</button>
            </div>
        </div>

        <!-- Form Elements -->
        <div class="card mb-8">
            <h2 class="text-2xl font-semibold mb-4">Form Elements</h2>
            <div class="space-y-4">
                <div>
                    <label class="block text-secondary mb-2">Text Input</label>
                    <input type="text" class="input w-full" placeholder="Enter text here">
                </div>
                <div>
                    <label class="block text-secondary mb-2">Email Input</label>
                    <input type="email" class="input w-full" placeholder="email@example.com">
                </div>
                <div>
                    <label class="block text-secondary mb-2">Textarea</label>
                    <textarea class="input w-full" rows="4" placeholder="Enter multiple lines of text"></textarea>
                </div>
                <div>
                    <label class="block text-secondary mb-2">Select</label>
                    <select class="input w-full">
                        <option>Option 1</option>
                        <option>Option 2</option>
                        <option>Option 3</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Status Indicators -->
        <div class="card mb-8">
            <h2 class="text-2xl font-semibold mb-4">Status Indicators</h2>
            <div class="space-y-2">
                <div class="flex items-center space-x-2">
                    <span class="status-success text-lg">✓</span>
                    <span class="status-success">Success message</span>
                </div>
                <div class="flex items-center space-x-2">
                    <span class="status-warning text-lg">⚠</span>
                    <span class="status-warning">Warning message</span>
                </div>
                <div class="flex items-center space-x-2">
                    <span class="status-error text-lg">✗</span>
                    <span class="status-error">Error message</span>
                </div>
                <div class="flex items-center space-x-2">
                    <span class="status-info text-lg">ℹ</span>
                    <span class="status-info">Info message</span>
                </div>
            </div>
        </div>

        <!-- Typography -->
        <div class="card mb-8">
            <h2 class="text-2xl font-semibold mb-4">Typography</h2>
            <div class="space-y-4">
                <div>
                    <h1 class="text-4xl font-bold text-primary">Heading 1</h1>
                    <h2 class="text-3xl font-bold text-primary">Heading 2</h2>
                    <h3 class="text-2xl font-semibold text-primary">Heading 3</h3>
                    <h4 class="text-xl font-semibold">Heading 4</h4>
                </div>
                <div>
                    <p class="text-primary mb-2">Primary text color</p>
                    <p class="text-secondary mb-2">Secondary text color</p>
                    <p class="text-muted mb-2">Muted text color</p>
                </div>
            </div>
        </div>

        <!-- Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div class="card">
                <h3 class="text-xl font-semibold text-primary mb-2">Card 1</h3>
                <p class="text-secondary mb-4">This is a sample card with some content.</p>
                <button class="btn-primary">Action</button>
            </div>
            <div class="card">
                <h3 class="text-xl font-semibold text-primary mb-2">Card 2</h3>
                <p class="text-secondary mb-4">Another card demonstrating the theme.</p>
                <button class="btn-secondary">Action</button>
            </div>
            <div class="card">
                <h3 class="text-xl font-semibold text-primary mb-2">Card 3</h3>
                <p class="text-secondary mb-4">Cards adapt to light and dark themes.</p>
                <button class="btn-primary">Action</button>
            </div>
        </div>

        <!-- Theme Controls -->
        <div class="card">
            <h2 class="text-2xl font-semibold mb-4">Theme Controls</h2>
            <div class="space-y-4">
                <div>
                    <p class="text-secondary mb-2">Current Theme: <span id="current-theme" class="font-semibold text-primary"></span></p>
                    <button onclick="window.themeManager.toggle()" class="btn-primary">Toggle Theme</button>
                </div>
                <div>
                    <p class="text-secondary mb-2">Current Language: <span id="current-language" class="font-semibold text-primary"></span></p>
                    <button onclick="window.languageManager.toggle()" class="btn-secondary">Toggle Language</button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Update current theme and language display
    document.addEventListener('DOMContentLoaded', () => {
        document.getElementById('current-theme').textContent = window.themeManager.getTheme();
        document.getElementById('current-language').textContent = window.languageManager.getLanguage();
    });
</script>
@endpush
@endsection