@extends('layouts.docs')

@section('title', 'Card - Design System')

@section('body')
    <div x-data="{ tab: 'examples' }" class="prose dark:prose-invert max-w-none">
        <div class="flex items-center justify-between mb-8">
            <div class="flex items-center gap-3">
                <div class="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
                    <flux:icon.rectangle-stack class="size-6 text-blue-600 dark:text-blue-400" />
                </div>
                <h1 class="!mb-0">Card</h1>
            </div>
            
            <div class="flex bg-zinc-100 dark:bg-zinc-900 p-1 rounded-lg border border-zinc-200 dark:border-zinc-800">
                <button @click="tab = 'examples'" :class="tab === 'examples' ? 'bg-white dark:bg-zinc-800 shadow-sm text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'" class="px-4 py-1.5 rounded-md text-sm font-medium transition-all">Exemplos</button>
                <button @click="tab = 'code'" :class="tab === 'code' ? 'bg-white dark:bg-zinc-800 shadow-sm text-zinc-900 dark:text-white' : 'text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'" class="px-4 py-1.5 rounded-md text-sm font-medium transition-all">Código</button>
            </div>
        </div>

        <p class="text-xl text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-3xl mb-12">
            Cards são contentores flexíveis para conteúdo variado, como texto, imagens, listas e botões, organizados de forma clara e isolada.
        </p>

        <div x-show="tab === 'examples'" class="space-y-8">
            <og-demo>
                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">Título do Card</h5>
                        <p class="card-text">Conteúdo de exemplo dentro de um card padrão do Bootstrap 4 integrando no OfficeGest.</p>
                        <a href="#" class="btn btn-primary">Ação</a>
                    </div>
                </div>
            </og-demo>

            <h2 class="text-2xl font-bold mt-12 mb-6">Com Header e Footer</h2>
            <og-demo>
                <div class="card">
                    <div class="card-header font-weight-bold">
                        Destaque
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Título Especial</h5>
                        <p class="card-text">Cards com headers são ideais para widgets de dashboard ou seções de formulário.</p>
                    </div>
                    <div class="card-footer text-muted">
                        Última atualização há 2 dias
                    </div>
                </div>
            </og-demo>
        </div>

        <div x-show="tab === 'code'" x-cloak>
            <pre class="language-php"><code>echo UI::Card('Título', 'Conteúdo do card', 'Footer opcional');</code></pre>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/design-system/og-demo.js') }}"></script>
@endpush