@php
    $pageTitle = 'Nova Unidade Regional';
@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.unidade-regional.cms.index') }}">Unidades Regionais</a>
    <span class="separator">›</span>
    <span class="current">Nova</span>
@endsection

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

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

        {{-- Descrição --}}
        <div class="card mb-4">
            <div class="card-header bg-white py-3">
                <h5 class="card-title mb-0">
                    <i class="bi bi-pencil-square me-1 text-primary"></i> Descrição
                </h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="resumo" class="form-label fw-semibold">Descrição Rápida</label>
                    <textarea id="resumo" name="resumo" rows="3" class="form-control"
                              placeholder="Breve resumo da regional..."
                              maxlength="250"
                              aria-describedby="resumo-counter">{{ old('resumo') }}</textarea>
                    <div id="resumo-counter" class="form-text text-end small" aria-live="polite">
                        <span id="resumo-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'        => 'description',
                        'label'       => 'Descrição Detalhada',
                        'value'       => old('description', '{"type":"doc","content":[]}'),
                        'placeholder' => 'Descreva detalhadamente a regional...',
                        'height'      => '400px',
                    ])
                </div>
            </div>
        </div>

        <div class="mt-4 d-flex gap-2">
            @v2can('UnidadeRegional', 'write')
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-check-circle me-1" aria-hidden="true"></i> Salvar
            </button>
            @endv2can
            <a href="{{ route('v2.unidade-regional.cms.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1" aria-hidden="true"></i> Cancelar
            </a>
        </div>
    </form>
@endsection

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