@extends('v2-cms::layouts.app', [
    'title' => $title,
])

@section('page-breadcrumbs')
    <span class="current">Layouts</span>
    <span class="separator">›</span>
    <a href="{{ route('v2.basicpage.index') }}">Páginas Básicas</a>
    <span class="separator">›</span>
    <span class="current">Preview: {{ $title }}</span>
@endsection

@section('content')
    @php $isFounder = \Sentinel::check() && \Sentinel::getUser()->email === config('v2.support.email'); @endphp

    <main role="main" class="v2-cms-module-container" style="padding: 10px;">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div></div>
            <div class="d-inline-flex gap-2">
                @if($isFounder && !empty($page))
                            <a href="{{ route('v2.basicpage.editor.edit', ['slug' => $page->slug]) }}"
                               class="btn btn-primary btn-sm d-inline-flex align-items-center gap-1 fw-bold"
                               style="box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                                <i class="bi bi-pencil-square"></i> Editar Conteúdo
                            </a>
                        @endif
                        @v2can('BasicPage', 'write')
                        @if(!empty($page))
                            <button type="button"
                                    class="btn btn-primary btn-sm d-inline-flex align-items-center gap-1 fw-bold"
                                    data-bs-toggle="modal"
                                    data-bs-target="#modalSeo_{{ $page->slug }}"
                                    style="box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                                <i class="bi bi-bar-chart-line"></i> SEO
                            </button>
                        @endif
                        @endv2can
                        <a href="{{ $url }}" target="_blank" class="btn btn-outline-secondary btn-sm d-inline-flex align-items-center gap-1 fw-bold" style="box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                            <i class="bi bi-box-arrow-up-right"></i> Abrir em Nova Aba
                        </a>
                    </div>
                </div>
            </div>
        </header>

        <section class="v2-main-content">
            @component('v2-cms::components.box', ['class' => 'card shadow-sm border-0 mb-0'])
                <div class="rounded overflow-hidden border" style="width: 100%; height: 75vh;">
                    <iframe src="{{ $url }}" style="width: 100%; height: 100%; border: none;" title="{{ $title }}"></iframe>
                </div>
            @endcomponent
        </section>
    </main>

    {{-- Modal de SEO --}}
    @v2can('BasicPage', 'write')
    @if(!empty($page))
        @php
            $seoData = $page->getSeoData();
            $seoModel = clone $page;
            $seoModelMeta = $seoModel->metadata ?: [];
            $seoModelMeta['seo'] = $seoData;
            $seoModel->metadata = $seoModelMeta;
        @endphp
        <div class="modal fade" id="modalSeo_{{ $page->slug }}" tabindex="-1" role="dialog" aria-labelledby="modalSeo_{{ $page->slug }}Label" aria-hidden="true">
            <div class="modal-dialog modal-md" role="document">
                <form action="{{ route('v2.basicpage.seo.update') }}" method="POST">
                    {{ csrf_field() }}
                    <input type="hidden" name="slug" value="{{ $page->slug }}">

                    <div class="modal-content border-0 shadow-lg">
                        <div class="modal-header bg-light">
                            <h5 class="modal-title fw-bold d-flex align-items-center gap-2" id="modalSeo_{{ $page->slug }}Label">
                                <i class="bi bi-bar-chart-line text-primary"></i> Metadados de SEO: {{ $page->title }}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                        </div>
                        <div class="modal-body p-4">
                            @include('v2-service-seo::components.seo-input', ['model' => $seoModel, 'name' => 'seo'])
                        </div>
                        <div class="modal-footer bg-light border-top-0">
                            <button type="button" class="btn btn-outline-secondary fw-bold px-3" data-bs-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-primary text-white fw-bold px-3">Salvar Configurações</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endif
    @endv2can
@endsection

{{-- Activity Footer --}}
@include('v2-cms::partials.activity-footer', ['model' => $page ?? null, 'history' => $history ?? null])

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('.modal form');
        if (form) {
            form.addEventListener('submit', function() {
                const mediaIdInput = form.querySelector('input[name="seo_image_id"]');
                const previewImg = form.querySelector('.preview-container img');

                const targetImageId = form.querySelector('input[name="seo[image_id]"]');
                const targetImageUrl = form.querySelector('input[name="seo[image_url]"]');

                if (targetImageId) targetImageId.value = mediaIdInput ? mediaIdInput.value : '';
                if (targetImageUrl) targetImageUrl.value = previewImg ? previewImg.getAttribute('src') : '';
            });
        }
    });
</script>
@endpush