@extends('layouts.admin')

@section('header', 'Design System Style Guide')

@section('content')
<div class="p-6">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">ConsentAngel Design System</h1>
    </div>

    <!-- Color System -->
    <x-ui.layout.card class="mb-8">
        <x-slot name="header">Color System</x-slot>
        
        <div class="space-y-6">
            <div>
                <h3 class="text-lg font-medium mb-3">Primary Colors</h3>
                <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
                    @foreach(['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'] as $shade)
                        <div>
                            <div class="h-16 w-full bg-primary-{{ $shade }} rounded-md shadow-sm"></div>
                            <div class="mt-1 text-xs">
                                <div>primary-{{ $shade }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-3">Secondary Colors</h3>
                <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
                    @foreach(['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'] as $shade)
                        <div>
                            <div class="h-16 w-full bg-secondary-{{ $shade }} rounded-md shadow-sm"></div>
                            <div class="mt-1 text-xs">
                                <div>secondary-{{ $shade }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-3">Neutral Colors</h3>
                <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
                    @foreach(['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'] as $shade)
                        <div>
                            <div class="h-16 w-full bg-neutral-{{ $shade }} rounded-md shadow-sm"></div>
                            <div class="mt-1 text-xs">
                                <div>neutral-{{ $shade }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-3">Semantic Colors</h3>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div>
                        <div class="h-16 w-full bg-success-600 rounded-md shadow-sm"></div>
                        <div class="mt-1 text-xs">
                            <div>success-600</div>
                        </div>
                    </div>
                    <div>
                        <div class="h-16 w-full bg-warning-500 rounded-md shadow-sm"></div>
                        <div class="mt-1 text-xs">
                            <div>warning-500</div>
                        </div>
                    </div>
                    <div>
                        <div class="h-16 w-full bg-danger-600 rounded-md shadow-sm"></div>
                        <div class="mt-1 text-xs">
                            <div>danger-600</div>
                        </div>
                    </div>
                    <div>
                        <div class="h-16 w-full bg-info-600 rounded-md shadow-sm"></div>
                        <div class="mt-1 text-xs">
                            <div>info-600</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </x-ui.layout.card>

    <!-- Typography -->
    <x-ui.layout.card class="mb-8">
        <x-slot name="header">Typography</x-slot>
        
        <div class="space-y-6">
            <div>
                <h3 class="text-lg font-medium mb-3">Headings</h3>
                <div class="space-y-4">
                    <div>
                        <h1 class="text-4xl font-bold">Heading 1</h1>
                        <div class="text-xs text-neutral-500 mt-1">text-4xl font-bold</div>
                    </div>
                    <div>
                        <h2 class="text-3xl font-bold">Heading 2</h2>
                        <div class="text-xs text-neutral-500 mt-1">text-3xl font-bold</div>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold">Heading 3</h3>
                        <div class="text-xs text-neutral-500 mt-1">text-2xl font-bold</div>
                    </div>
                    <div>
                        <h4 class="text-xl font-bold">Heading 4</h4>
                        <div class="text-xs text-neutral-500 mt-1">text-xl font-bold</div>
                    </div>
                    <div>
                        <h5 class="text-lg font-bold">Heading 5</h5>
                        <div class="text-xs text-neutral-500 mt-1">text-lg font-bold</div>
                    </div>
                </div>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-3">Text Styles</h3>
                <div class="space-y-4">
                    <div>
                        <p class="text-base">Base text - The quick brown fox jumps over the lazy dog.</p>
                        <div class="text-xs text-neutral-500 mt-1">text-base</div>
                    </div>
                    <div>
                        <p class="text-sm">Small text - The quick brown fox jumps over the lazy dog.</p>
                        <div class="text-xs text-neutral-500 mt-1">text-sm</div>
                    </div>
                    <div>
                        <p class="text-xs">Extra small text - The quick brown fox jumps over the lazy dog.</p>
                        <div class="text-xs text-neutral-500 mt-1">text-xs</div>
                    </div>
                    <div>
                        <p class="text-base font-medium">Medium text - The quick brown fox jumps over the lazy dog.</p>
                        <div class="text-xs text-neutral-500 mt-1">text-base font-medium</div>
                    </div>
                    <div>
                        <p class="text-base font-semibold">Semibold text - The quick brown fox jumps over the lazy dog.</p>
                        <div class="text-xs text-neutral-500 mt-1">text-base font-semibold</div>
                    </div>
                    <div>
                        <p class="text-base font-bold">Bold text - The quick brown fox jumps over the lazy dog.</p>
                        <div class="text-xs text-neutral-500 mt-1">text-base font-bold</div>
                    </div>
                    <div>
                        <p class="text-base italic">Italic text - The quick brown fox jumps over the lazy dog.</p>
                        <div class="text-xs text-neutral-500 mt-1">text-base italic</div>
                    </div>
                    <div>
                        <p class="text-base text-neutral-500">Muted text - The quick brown fox jumps over the lazy dog.</p>
                        <div class="text-xs text-neutral-500 mt-1">text-base text-neutral-500</div>
                    </div>
                    <div>
                        <a href="#" class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300">Link text - The quick brown fox jumps over the lazy dog.</a>
                        <div class="text-xs text-neutral-500 mt-1">text-primary-600 hover:text-primary-700</div>
                    </div>
                </div>
            </div>
        </div>
    </x-ui.layout.card>

    <!-- Buttons -->
    <x-ui.layout.card class="mb-8">
        <x-slot name="header">Buttons</x-slot>
        
        <div class="space-y-6">
            <div>
                <h3 class="text-lg font-medium mb-3">Button Variants</h3>
                <div class="flex flex-wrap gap-4">
                    <div>
                        <x-ui.buttons.primary>Primary Button</x-ui.buttons.primary>
                        <div class="text-xs text-neutral-500 mt-1">Primary Button</div>
                    </div>
                    <div>
                        <x-ui.buttons.secondary>Secondary Button</x-ui.buttons.secondary>
                        <div class="text-xs text-neutral-500 mt-1">Secondary Button</div>
                    </div>
                    <div>
                        <button class="btn-danger">Danger Button</button>
                        <div class="text-xs text-neutral-500 mt-1">Danger Button</div>
                    </div>
                    <div>
                        <button class="btn-success">Success Button</button>
                        <div class="text-xs text-neutral-500 mt-1">Success Button</div>
                    </div>
                    <div>
                        <button class="btn-warning">Warning Button</button>
                        <div class="text-xs text-neutral-500 mt-1">Warning Button</div>
                    </div>
                    <div>
                        <button class="btn-info">Info Button</button>
                        <div class="text-xs text-neutral-500 mt-1">Info Button</div>
                    </div>
                </div>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-3">Button Sizes</h3>
                <div class="flex flex-wrap gap-4 items-center">
                    <div>
                        <x-ui.buttons.primary size="sm">Small Button</x-ui.buttons.primary>
                        <div class="text-xs text-neutral-500 mt-1">Small</div>
                    </div>
                    <div>
                        <x-ui.buttons.primary>Default Button</x-ui.buttons.primary>
                        <div class="text-xs text-neutral-500 mt-1">Default</div>
                    </div>
                    <div>
                        <x-ui.buttons.primary size="lg">Large Button</x-ui.buttons.primary>
                        <div class="text-xs text-neutral-500 mt-1">Large</div>
                    </div>
                </div>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-3">Action Buttons</h3>
                <div class="flex flex-wrap gap-4">
                    <div>
                        <a href="#" class="action-btn-view">View</a>
                        <div class="text-xs text-neutral-500 mt-1">View Button</div>
                    </div>
                    <div>
                        <a href="#" class="action-btn-edit">Edit</a>
                        <div class="text-xs text-neutral-500 mt-1">Edit Button</div>
                    </div>
                    <div>
                        <button class="action-btn-delete">Delete</button>
                        <div class="text-xs text-neutral-500 mt-1">Delete Button</div>
                    </div>
                </div>
            </div>
        </div>
    </x-ui.layout.card>

    <!-- Cards -->
    <x-ui.layout.card class="mb-8">
        <x-slot name="header">Cards</x-slot>
        
        <div class="space-y-6">
            <div>
                <h3 class="text-lg font-medium mb-3">Card Variants</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <x-ui.layout.card>
                        <x-slot name="header">Card with Header</x-slot>
                        <p>This is a card with a header. Cards are used to group related content.</p>
                    </x-ui.layout.card>

                    <x-ui.layout.card>
                        <p>This is a simple card without a header or footer.</p>
                        <p class="mt-2">Cards provide a flexible container for displaying content.</p>
                    </x-ui.layout.card>

                    <x-ui.layout.card>
                        <x-slot name="header">Card with Header and Footer</x-slot>
                        <p>This card has both a header and footer section.</p>
                        <x-slot name="footer">
                            <div class="flex justify-end">
                                <x-ui.buttons.secondary class="mr-2">Cancel</x-ui.buttons.secondary>
                                <x-ui.buttons.primary>Save</x-ui.buttons.primary>
                            </div>
                        </x-slot>
                    </x-ui.layout.card>

                    <x-ui.layout.card padding="large">
                        <p>This card uses the large padding option.</p>
                        <p class="mt-2">Different padding options are available: none, small, normal, and large.</p>
                    </x-ui.layout.card>
                </div>
            </div>
        </div>
    </x-ui.layout.card>

    <!-- Form Elements -->
    <x-ui.layout.card class="mb-8">
        <x-slot name="header">Form Elements</x-slot>
        
        <div class="space-y-6">
            <div>
                <h3 class="text-lg font-medium mb-3">Text Inputs</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="default-input" class="form-label">Default Input</label>
                        <input type="text" id="default-input" class="form-input" placeholder="Enter text">
                    </div>
                    
                    <div>
                        <label for="disabled-input" class="form-label">Disabled Input</label>
                        <input type="text" id="disabled-input" class="form-input" placeholder="Disabled input" disabled>
                    </div>
                </div>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-3">Select Inputs</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="default-select" class="form-label">Default Select</label>
                        <select id="default-select" class="form-input">
                            <option>Option 1</option>
                            <option>Option 2</option>
                            <option>Option 3</option>
                        </select>
                    </div>
                </div>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-3">Checkboxes & Radios</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <div class="flex items-center mb-2">
                            <input id="checkbox-1" type="checkbox" class="h-4 w-4 text-primary-600 border-neutral-300 rounded focus:ring-primary-500 dark:border-neutral-600 dark:focus:ring-primary-400">
                            <label for="checkbox-1" class="ml-2 text-sm text-neutral-700 dark:text-neutral-300">Checkbox Option 1</label>
                        </div>
                        <div class="flex items-center">
                            <input id="checkbox-2" type="checkbox" class="h-4 w-4 text-primary-600 border-neutral-300 rounded focus:ring-primary-500 dark:border-neutral-600 dark:focus:ring-primary-400">
                            <label for="checkbox-2" class="ml-2 text-sm text-neutral-700 dark:text-neutral-300">Checkbox Option 2</label>
                        </div>
                    </div>
                    
                    <div>
                        <div class="flex items-center mb-2">
                            <input id="radio-1" name="radio-group" type="radio" class="h-4 w-4 text-primary-600 border-neutral-300 focus:ring-primary-500 dark:border-neutral-600 dark:focus:ring-primary-400">
                            <label for="radio-1" class="ml-2 text-sm text-neutral-700 dark:text-neutral-300">Radio Option 1</label>
                        </div>
                        <div class="flex items-center">
                            <input id="radio-2" name="radio-group" type="radio" class="h-4 w-4 text-primary-600 border-neutral-300 focus:ring-primary-500 dark:border-neutral-600 dark:focus:ring-primary-400">
                            <label for="radio-2" class="ml-2 text-sm text-neutral-700 dark:text-neutral-300">Radio Option 2</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </x-ui.layout.card>

    <!-- Feedback Elements -->
    <x-ui.layout.card class="mb-8">
        <x-slot name="header">Feedback Elements</x-slot>
        
        <div class="space-y-6">
            <div>
                <h3 class="text-lg font-medium mb-3">Badges</h3>
                <div class="flex flex-wrap gap-4">
                    <div>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
                            Primary
                        </span>
                    </div>
                    <div>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary-100 text-secondary-800 dark:bg-secondary-900 dark:text-secondary-200">
                            Secondary
                        </span>
                    </div>
                    <div>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success-100 text-success-800 dark:bg-success-900 dark:text-success-200">
                            Success
                        </span>
                    </div>
                    <div>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-danger-100 text-danger-800 dark:bg-danger-900 dark:text-danger-200">
                            Danger
                        </span>
                    </div>
                    <div>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-warning-100 text-warning-800 dark:bg-warning-900 dark:text-warning-200">
                            Warning
                        </span>
                    </div>
                    <div>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-info-100 text-info-800 dark:bg-info-900 dark:text-info-200">
                            Info
                        </span>
                    </div>
                </div>
            </div>

            <div>
                <h3 class="text-lg font-medium mb-3">Alerts</h3>
                <div class="space-y-4">
                    <div class="p-4 rounded-md bg-success-50 border border-success-200 dark:bg-success-900/30 dark:border-success-700">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-success-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-success-800 dark:text-success-200">Success alert message</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-4 rounded-md bg-danger-50 border border-danger-200 dark:bg-danger-900/30 dark:border-danger-700">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-danger-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-danger-800 dark:text-danger-200">Error alert message</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-4 rounded-md bg-warning-50 border border-warning-200 dark:bg-warning-900/30 dark:border-warning-700">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-warning-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-warning-800 dark:text-warning-200">Warning alert message</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-4 rounded-md bg-info-50 border border-info-200 dark:bg-info-900/30 dark:border-info-700">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <svg class="h-5 w-5 text-info-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-info-800 dark:text-info-200">Info alert message</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </x-ui.layout.card>
</div>
@endsection