{{--
    @intent Componente de configuração de SEO para registros (CMS V2).
    @description Botão acessível que abre um modal Bootstrap 3 para gerenciar Meta Tags e Schemas.
    @param Model $model Registro que possui o campo 'metadata'.
    @param string $id Identificador único para o modal.
--}}
@php
    $modalId = 'modalSeo' . ($id ?? \Illuminate\Support\Str::random(8));
    $seoData = (isset($model) && isset($model->metadata['seo'])) ? $model->metadata['seo'] : [];
@endphp

<button type="button" 
        class="btn btn-outline-secondary btn-sm d-flex align-items-center gap-1" 
        data-bs-toggle="modal" 
        data-bs-target="#{{ $modalId }}"
        title="Configurações de SEO">
    <i class="bi bi-graph-up-arrow"></i> SEO
</button>

@push('modals')
<div class="modal fade" id="{{ $modalId }}" tabindex="-1" role="dialog" aria-labelledby="{{ $modalId }}Label" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-light">
                <h5 class="modal-title d-flex align-items-center gap-2" id="{{ $modalId }}Label">
                    <i class="bi bi-search"></i> Configurações de SEO e Metadados
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info d-flex align-items-center gap-2 border-0" role="alert">
                    <i class="bi bi-info-circle-fill"></i>
                    <div>
                        Estas configurações sobrescrevem os padrões globais do site para esta página específica.
                    </div>
                </div>

                <div class="mb-3">
                    <label for="seo_title_{{ $modalId }}" class="form-label fw-bold">Título da Página (Meta Title)</label>
                    <input type="text" name="metadata[seo][title]" id="seo_title_{{ $modalId }}" 
                           class="form-control" placeholder="Título customizado para o Google"
                           value="{{ $seoData['title'] ?? '' }}">
                    <div class="form-text text-muted">Recomendado: Até 60 caracteres.</div>
                </div>

                <div class="mb-3">
                    <label for="seo_desc_{{ $modalId }}" class="form-label fw-bold">Descrição (Meta Description)</label>
                    <textarea name="metadata[seo][description]" id="seo_desc_{{ $modalId }}" 
                               class="form-control" rows="3" placeholder="Resumo atrativo para os resultados de busca">{{ $seoData['description'] ?? '' }}</textarea>
                    <div class="form-text text-muted">Recomendado: Entre 120 e 160 caracteres.</div>
                </div>

                <div class="mb-3">
                    <label for="seo_key_{{ $modalId }}" class="form-label fw-bold">Palavras-chave (Keywords)</label>
                    <input type="text" name="metadata[seo][keywords]" id="seo_key_{{ $modalId }}" 
                           class="form-control" placeholder="exemplo, lotep, transparência"
                           value="{{ $seoData['keywords'] ?? '' }}">
                </div>

                <div class="mb-3">
                    <label for="seo_json_{{ $modalId }}" class="form-label fw-bold">Dados Estruturados (JSON-LD Customizado)</label>
                    <textarea name="metadata[seo][json_ld]" id="seo_json_{{ $modalId }}" 
                               class="form-control" rows="5" placeholder='{ "@context": "https://schema.org", "@type": "Article", ... }'
                               style="font-family: monospace; font-size: 12px; background: #272822; color: #f8f8f2;">@php
                                   $jsonLd = isset($seoData['json_ld']) ? $seoData['json_ld'] : '';
                                   echo is_array($jsonLd) ? json_encode($jsonLd, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) : $jsonLd;
                               @endphp</textarea>
                    <div class="form-text text-muted">Insira o código JSON bruto. Ele será injetado automaticamente no cabeçalho.</div>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Confirmar</button>
            </div>
        </div>
    </div>
</div>
@endpush

@push('js')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form');
        if (form) {
            form.addEventListener('submit', function() {
                const modal = document.getElementById('{{ $modalId }}');
                if (modal) {
                    form.appendChild(modal);
                }
            });
        }
    });
</script>
@endpush