@php
    /** @var \V2\Modules\Institucional\Historia\Models\Milestone $milestone */
    $pageTitle = 'Editar: ' . $milestone->title;
    $previewUrl = route('v2.historia.cms.milestones.preview', ['id' => $milestone->id]);
@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">Editar: {{ $milestone->title }}</span>
@endsection

@section('content')
<form action="{{ route('v2.historia.cms.milestones.update', ['id' => $milestone->id]) }}" method="POST" enctype="multipart/form-data">
    {{ csrf_field() }}
    {{ method_field('PUT') }}

    @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', $milestone->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' => $milestone->image_id ?? '',
                    'currentUrl' => $milestone->image
                        ? v2_storage_url($milestone->image->file_path)
                        : '',
                    'currentAlt' => $milestone->title ?? '',
                ])
            </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> Pronto</span>
            </div>
            <iframe id="live-preview-iframe" src="{{ $previewUrl }}"
                    title="Preview do marco histórico"
                    sandbox="allow-scripts allow-same-origin"></iframe>
        </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> Atualizar
        </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