@php
    $pageTitle = 'Nova Instituição';
@endphp

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

@section('page-breadcrumbs')
    <span class="current">Conexões</span>
    <span class="separator">›</span>
    <a href="{{ route('v2.associados.cms.instituicoes.index') }}">Associados Regionais</a>
    <span class="separator">›</span>
    <span class="current">Nova</span>
@endsection

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

    @include('v2-associados::cms.instituicoes._form')

    {{-- Editor de Conteúdo --}}
    <h6 class="fw-bold mb-3"><i class="bi bi-pencil-square me-1 text-primary"></i> Descrição</h6>

    <div class="card mb-4">
        <div class="card-body">
            <div class="mb-3">
                <label for="description" class="form-label fw-semibold">Descrição Rápida</label>
                <textarea id="description" name="description" rows="3" class="form-control"
                          placeholder="Breve resumo do convênio (máx. 250 caracteres)..."
                          maxlength="250"
                          aria-describedby="description-counter">{{ old('description') }}</textarea>
                <div id="description-counter" class="form-text text-end small" aria-live="polite">
                    <span id="description-count">0</span>/250 caracteres
                </div>
            </div>

            <div class="mb-0">
                <label class="form-label fw-semibold">Descrição Detalhada</label>
                @include('v2-service-contentricheditor::components.forms.content-rich-editor', [
                    'name'        => 'convenio_description',
                    'label'       => 'Descrição Detalhada',
                    'value'       => old('convenio_description', '{"type":"doc","content":[]}'),
                    'placeholder' => 'Descreva detalhadamente o convênio...',
                    'height'      => '400px',
                ])
            </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.associados.cms.instituicoes.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i> Cancelar
        </a>
    </div>
</form>
@push('scripts')
<script>
(function() {
    var ta = document.getElementById('description');
    var counter = document.getElementById('description-count');
    if (!ta || !counter) return;
    function updateCounter() {
        counter.textContent = ta.value.length;
    }
    updateCounter();
    ta.addEventListener('input', updateCounter);
})();
</script>
@endpush
@endsection