@php
    /** @var \V2\Modules\Conexoes\Associados\Models\AssociadoInstituicao $instituicao */
    $pageTitle = 'Editar: ' . $instituicao->name;
    $previewUrl = route('v2.associados.cms.instituicoes.preview', ['id' => $instituicao->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;
    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%;
    min-height: 50vh;
    height: 500px;
    border: none;
    background: #fff;
}
</style>
@endpush

@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">Editar: {{ $instituicao->name }}</span>
@endsection

@section('page-actions')
    @v2can('Associados', 'write')
    <div class="d-flex gap-1">
        @if($instituicao->is_active)
            <form action="{{ route('v2.associados.cms.instituicoes.destroy', ['id' => $instituicao->id]) }}"
                  method="POST" class="d-inline"
                  onsubmit="return confirm('Arquivar &quot;{{ $instituicao->name }}&quot;?')">
                {{ csrf_field() }}
                {{ method_field('DELETE') }}
                <button type="submit" class="btn btn-sm btn-outline-danger">
                    <i class="bi bi-archive me-1"></i> Arquivar
                </button>
            </form>
        @endif
    </div>
    @endv2can
@endsection

@section('content')
<form action="{{ route('v2.associados.cms.instituicoes.update', ['id' => $instituicao->id]) }}"
      method="POST" novalidate>
    {{ csrf_field() }}
    {{ method_field('PUT') }}

    @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="editor-split mb-4">
        <div class="editor-left-panel">
            <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', $instituicao->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 for="convenio_description" 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', $instituicao->convenio_description ?? '{"type":"doc","content":[]}'),
                    'placeholder' => 'Descreva detalhadamente o convênio...',
                    'height'      => '400px',
                ])
            </div>
        </div>

        <div class="editor-right-panel">
            <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 da instituição"
                    sandbox="allow-scripts allow-same-origin"></iframe>
        </div>
    </div>

    {{-- Galeria de Imagens --}}
    <div class="card mt-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">
                <i class="bi bi-images me-1 text-primary"></i> Galeria de Imagens
            </h5>
            <span class="badge bg-secondary">{{ $instituicao->gallery->count() }}</span>
        </div>
        <div class="card-body">
            @php
                $galleryIds = $instituicao->gallery->pluck('gallery_media_id')->filter()->values()->toArray();
                $galleryUrls = [];
                $gStorage = app(\V2\Services\Storage\StorageService::class);
                foreach ($instituicao->gallery as $item) {
                    if ($item->galleryMedia) {
                        $galleryUrls[] = $gStorage->url($item->galleryMedia->file_path);
                    } elseif ($item->image) {
                        $galleryUrls[] = $gStorage->url($item->image);
                    }
                }
            @endphp

            @include('v2-service-media::components.media-group-input', [
                'name' => 'convenios_gallery',
                'label' => 'Adicionar imagens',
                'accept' => 'image/*',
                'ownerModule' => 'associados',
                'existingIds' => $galleryIds,
                'existingUrls' => $galleryUrls,
            ])
        </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.associados.cms.instituicoes.index') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i> Cancelar
        </a>
    </div>
        </form>

{{-- Activity Log --}}
@include('v2-cms::partials.activity-footer', ['model' => $instituicao])

@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