@php
    $pageTitle = 'Novo Marco Histórico';
@endphp

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

@push('css')
<style>
.editor-split {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    overflow: hidden;
}
@media (min-width: 992px) {
    .editor-split {
        grid-template-columns: 3fr 2fr;
    }
}
.editor-left-panel {
    padding: 1.5rem;
    background: #fff;
}
.editor-right-panel {
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: start;
    background: var(--bs-light-bg-subtle, #f8f9fa);
    border-left: 1px solid var(--bs-border-color, #dee2e6);
}
@media (max-width: 991px) {
    .editor-right-panel {
        border-left: none;
        border-top: 1px solid var(--bs-border-color, #dee2e6);
    }
}
.preview-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background: #222d32;
    color: #fff;
    font-size: var(--text-xs);
    line-height: 1.2;
}
.preview-header-bar .preview-status {
    font-family: monospace;
    color: #b8c7ce;
}
#live-preview-iframe {
    width: 100%;
    height: 360px;
    border: none;
    background: #fff;
}
</style>
@endpush

@section('page-breadcrumbs')
    <span class="current">Institucional</span>
    <span class="separator">›</span>
    <a href="{{ route('v2.historia.cms.milestones.index') }}">História</a>
    <span class="separator">›</span>
    <span class="current">Novo Marco</span>
@endsection

@section('content')
<form action="{{ route('v2.historia.cms.milestones.store') }}" method="POST" enctype="multipart/form-data">
    {{ csrf_field() }}

    @include('v2-historia::cms._form')

    <div class="mt-4 editor-split">
        <div class="editor-left-panel">
            @include('v2-service-contentricheditor::components.forms.content-rich-editor', [
                'name'        => 'description',
                'label'       => 'Conteúdo Narrativo',
                'value'       => old('description', '{"type":"doc","content":[]}'),
                'placeholder' => 'Descreva este marco histórico...',
                'height'      => '400px',
            ])
        </div>

        <div class="editor-right-panel">
            <div class="p-3 border-bottom bg-white">
                @include('v2-service-media::components.media-input', [
                    'name' => 'image_id',
                    'label' => 'Imagem de Destaque',
                    'accept' => 'image/*',
                    'required' => false,
                    'ownerModule' => 'historia',
                    'currentId' => '',
                    'currentUrl' => '',
                    'currentAlt' => '',
                ])
            </div>
            <div class="preview-header-bar">
                <strong><i class="bi bi-display me-1"></i> Preview</strong>
                <span class="preview-status"><i class="bi bi-dot"></i> Salve para visualizar</span>
            </div>
            <div class="d-flex flex-column align-items-center justify-content-center h-100 text-muted p-4">
                <i class="bi bi-eye-slash" style="font-size: 3rem;"></i>
                <p class="mt-3 mb-0">Salve o marco como rascunho para ver o preview.</p>
            </div>
        </div>
    </div>

    <div class="mt-4 d-flex gap-2">
        <button type="submit" class="btn btn-primary">
            <i class="bi bi-check-circle me-1"></i> Salvar
        </button>
        <a href="{{ route('v2.historia.cms.milestones.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i> Cancelar
        </a>
    </div>
</form>
@endsection