@php
    $pageTitle = 'Novo Parceiro';
@endphp

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

@push('css')
<style>
/* ============================================
   PARCEIROS CMS — Bloco Conteúdo (2 colunas 60/40)
   Replica a estrutura do módulo de Notícias
   ============================================ */
.card-news {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.card-news > .card-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.625rem 1.25rem;
    border-radius: 7px 7px 0 0;
    color: #1e293b;
}

.card-news > .card-header h5 {
    font-size: var(--text-md, 1.15rem);
    font-weight: var(--font-semibold, 600);
    line-height: 1.35;
    margin-bottom: 0;
}

.card-news > .card-header i {
    font-size: var(--text-md, 1.15rem);
    color: var(--tenant-primary, #1075ad);
}

.card-news .form-label {
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
    margin-bottom: 0.25rem;
    color: #334155;
}

.card-news .form-text {
    font-size: var(--text-xs, 0.785rem);
    color: #94a3b8;
    margin-top: 0.2rem;
}

/* Grid 2 colunas (60% / 40%) */
.content-columns {
    display: grid !important;
    grid-template-columns: 3fr 2fr;
    min-height: 400px;
}

.content-column-main {
    border-right: 1px solid #e2e8f0;
    min-width: 0;
    overflow: hidden;
}

.content-column-side {
    background: #fafbfc;
    min-width: 0;
    overflow: hidden;
}

/* Preview box — iframe da tela final do portal */
.content-preview-box {
    border: 1px dashed #d1d9e6;
    border-radius: 6px;
    background: #fff;
    min-height: 180px;
    max-height: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.content-preview-box .preview-iframe {
    width: 100%;
    flex-grow: 1;
    border: none;
    min-height: 400px;
}

.content-preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

@media (max-width: 992px) {
    .content-columns {
        flex-direction: column;
    }
    .content-column-main,
    .content-column-side {
        flex: 0 0 100%;
        max-width: 100%;
        border-right: none;
    }
    .content-column-side {
        border-top: 1px solid #e2e8f0;
    }
}
</style>
@endpush

@section('page-breadcrumbs')
    <span class="current">Conexões</span>
    <span class="separator">›</span>
    <a href="{{ route('v2.parceiros-institucionais.cms.index') }}">Parceiros</a>
    <span class="separator">›</span>
    <span class="current">Novo Parceiro</span>
@endsection

@section('content')
<form action="{{ route('v2.parceiros-institucionais.cms.store') }}" method="POST" novalidate>
    {{ csrf_field() }}

    @include('v2-parceirosinstitucionais::cms._form', ['parceiro' => null])

    {{-- ========================================================================
       BLOCO CONTEÚDO: 2 colunas — Resumo + Descrição (60%) | Logo + Preview (40%)
       ======================================================================== --}}
    <div class="card card-news mb-3">
        <div class="card-header d-flex align-items-center gap-2">
            <i class="bi bi-file-text" aria-hidden="true"></i>
            <h5 class="mb-0">Conteúdo</h5>
        </div>
        <div class="card-body p-0">
            <div class="content-columns">
                {{-- Coluna principal (60%): Resumo + Descrição --}}
                <div class="content-column-main">
                    <div class="p-3">
                        <label for="summary" class="form-label">Resumo</label>
                        <textarea id="summary" name="summary" rows="3" maxlength="250"
                                  class="form-control{{ $errors->has('summary') ? ' is-invalid' : '' }}"
                                  aria-describedby="summary-counter"
                                  placeholder="Resumo curto em texto puro — exibido na listagem geral de parceiros...">{{ old('summary', $parceiro->summary ?? '') }}</textarea>
                        @if($errors->has('summary'))
                            <div class="invalid-feedback">{{ $errors->first('summary') }}</div>
                        @endif
                        <div id="summary-counter" class="form-text text-end small" aria-live="polite">
                            <span id="summary-count">0</span>/250 caracteres
                        </div>
                        <div class="form-text mb-3">Texto puro corrido (sem formatação). Usado como mini-descrição na página de parceiros. Máximo 250 caracteres.</div>

                        <label class="form-label">Descrição</label>
                        @include('v2-service-contentricheditor::components.forms.content-rich-editor', [
                            'name'        => 'description',
                            'label'       => '',
                            'value'       => old('description', '{"type":"doc","content":[]}'),
                            'placeholder' => 'Descreva o parceiro...',
                            'height'      => '400px',
                            'required'    => false,
                        ])
                    </div>
                </div>

                {{-- Coluna lateral (40%): Logo + Preview --}}
                <div class="content-column-side">
                    <div class="p-3">
                        <div class="mb-4">
                            <label class="form-label fw-medium">Logo</label>
                            @include('v2-service-media::components.media-input', [
                                'name'        => 'logo_id',
                                'label'       => '',
                                'accept'      => 'image/*',
                                'required'    => false,
                                'ownerModule' => 'parceiros-institucionais',
                                'currentId'   => '',
                                'currentUrl'  => '',
                                'currentAlt'  => '',
                            ])
                        </div>

                        <div>
                            <label class="form-label fw-medium">Preview</label>
                            <div class="content-preview-box" id="content-preview-box">
                                <div class="content-preview-placeholder text-muted text-center p-4">
                                    <i class="bi bi-floppy fs-2 d-block mb-2" aria-hidden="true"></i>
                                    <span class="small">Salve o parceiro para ver o preview completo.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </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.parceiros-institucionais.cms.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i> Cancelar
        </a>
    </div>
</form>
@endsection

@push('scripts')
<script>
(function() {
    var ta = document.getElementById('summary');
    var counter = document.getElementById('summary-count');
    if (!ta || !counter) return;
    function updateCounter() {
        counter.textContent = ta.value.length;
    }
    updateCounter();
    ta.addEventListener('input', updateCounter);
})();
</script>
@endpush