@extends('layouts.docs')

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

@push('head')
    {{-- Precisamos do CSS do Bootstrap globalmente ou via scoped para o Modal funcionar bem (devido ao backdrop e classes no body) --}}
    <style>
        /* Scoped styles for modal to avoid global pollution */
        .modal-backdrop.show { opacity: 0.5 !important; }
    </style>
@endpush

@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-indigo-100 dark:bg-indigo-900/30 rounded-lg">
                    <flux:icon.window class="size-6 text-indigo-600 dark:text-indigo-400" />
                </div>
                <h1 class="!mb-0">Modal</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>
                <button @click="tab = 'usage'" :class="tab === 'usage' ? '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">Uso</button>
            </div>
        </div>

        <p class="text-xl text-zinc-600 dark:text-zinc-400 leading-relaxed max-w-3xl mb-12">
            Modals são caixas de diálogo sobrepostas que capturam a atenção do utilizador para uma tarefa ou informação crítica, bloqueando o acesso ao conteúdo principal até serem fechados.
        </p>

        {{-- Tab: Exemplos --}}
        <div x-show="tab === 'examples'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
            <h2 class="text-2xl font-bold mb-6">Exemplo Básico</h2>
            <p>Clique no botão para abrir um modal padrão do sistema.</p>
            
            <div class="not-prose mt-6">
                {{-- Para o Modal funcionar com JS, vamos usar o og-demo sem Shadow DOM para este teste,
                     ou garantir que o JS do Bootstrap está na página e os seletores batem certo. --}}
                <div class="p-8 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-xl shadow-sm">
                    {{-- Bootstrap Context --}}
                    <div class="bootstrap-iso">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                            Abrir Modal de Teste
                        </button>

                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Título do Modal</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        Este é um exemplo de conteúdo dentro de um modal do OfficeGest.
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                                        <button type="button" class="btn btn-primary">Gravar Alterações</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <h2 class="text-2xl font-bold mt-12 mb-6">Tamanhos Disponíveis</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="p-4 border rounded-lg text-center">
                    <div class="font-bold mb-2">Pequeno (sm)</div>
                    <code class="text-xs">.modal-sm</code>
                </div>
                <div class="p-4 border rounded-lg text-center">
                    <div class="font-bold mb-2">Padrão</div>
                    <code class="text-xs">—</code>
                </div>
                <div class="p-4 border rounded-lg text-center">
                    <div class="font-bold mb-2">Grande (lg)</div>
                    <code class="text-xs">.modal-lg</code>
                </div>
            </div>
        </div>

        {{-- Tab: Código --}}
        <div x-show="tab === 'code'" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
            <h2 class="text-2xl font-bold mb-6">Helper PHP</h2>
            <pre class="language-php"><code>echo UI::Modal('deleteItem', 'Confirmar Eliminação', 'Tem a certeza que deseja eliminar este item?', [
    'footer' => UI::Button('Confirmar', 'btn-danger') . UI::Button('Cancelar', 'btn-secondary', '', ['data-dismiss' => 'modal'])
]);</code></pre>

            <h2 class="text-2xl font-bold mt-12 mb-6">Trigger Visual</h2>
            <pre class="language-html"><code>&lt;button data-toggle="modal" data-target="#deleteItem" class="btn btn-danger"&gt;
    Eliminar
&lt;/button&gt;</code></pre>
        </div>

        {{-- Tab: Uso --}}
        <div x-show="tab === 'usage'" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
            <h2 class="text-2xl font-bold mb-6">Boas Práticas</h2>
            <ul class="space-y-4">
                <li><strong>Não abuse:</strong> Modals interrompem o fluxo do utilizador. Use apenas quando necessário.</li>
                <li><strong>Um por vez:</strong> Evite abrir modals sobre outros modals (nesting).</li>
                <li><strong>Foco:</strong> Garanta que o botão de fechar está sempre visível e funcional.</li>
            </ul>
        </div>
    </div>
@endsection

@push('head')
    {{-- Injetar CSS do Bootstrap isolado por classe para o Modal funcionar --}}
    <link rel="stylesheet" href="https://design.dev.guisoft.net/assets/bs4/css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="https://design.dev.guisoft.net/assets/bs4/css/components.css">
    <link rel="stylesheet" href="https://design.dev.guisoft.net/assets/bs4/css/ogmin.css">
    <style>
        /* Limitar o impacto do Bootstrap apenas ao contexto .bootstrap-iso e .modal */
        .bootstrap-iso .btn { /* Bootstrap styles will apply here */ }
        .modal-open { overflow: hidden; } /* Necessário para o body quando modal abre */
    </style>
@endpush

@push('scripts')
    <script src="https://design.dev.guisoft.net/assets/js/jquery.js"></script>
    <script src="https://design.dev.guisoft.net/assets/bs4/js/popper.js"></script>
    <script src="https://design.dev.guisoft.net/assets/bs4/js/bootstrap/bootstrap.js"></script>
@endpush