@extends('admin.layouts.admin')

@section('title', $post->exists ? 'Editar artículo' : 'Nuevo artículo')

@section('content')

<style>[x-cloak]{display:none!important;}</style>

<div class="mb-3"><a href="{{ route('admin.blog.posts.index') }}" class="btn-back">← Artículos</a></div>

<div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
    <div class="admin-page-title">{{ $post->exists ? 'Editar: ' . $post->title : 'Nuevo artículo' }}</div>
    @if($post->exists)
        <div class="d-flex gap-2 align-items-center flex-wrap">
            <span class="fermenty-badge badge-active">{{ $post->views_count ?? 0 }} vistas</span>
            <span class="fermenty-badge badge-premium">{{ $post->comments_count ?? 0 }} comentarios</span>
            <a href="{{ $post->status === 'published' ? route('blog.show', $post->slug) : route('admin.blog.posts.preview', $post) }}"
               target="_blank" rel="noopener" class="btn btn-fermenty-outline btn-sm">
                <i class="fa-solid fa-arrow-up-right-from-square me-1"></i>Ver en blog
            </a>
        </div>
    @endif
</div>

@if($errors->any())
    <div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
@endif

<form method="POST"
      action="{{ $post->exists ? route('admin.blog.posts.update', $post) : route('admin.blog.posts.store') }}"
      enctype="multipart/form-data" class="fermenty-form" x-data="{ status: '{{ old('status', $post->status) }}', seo: false }">
    @csrf
    @if($post->exists) @method('PUT') @endif

    <div class="row g-3">
        <div class="col-12 col-lg-8">
            <div class="admin-card">
                <div class="mb-3">
                    <label class="form-label">Título</label>
                    <input type="text" name="title" id="postTitle" value="{{ old('title', $post->title) }}" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Slug</label>
                    <input type="text" name="slug" id="postSlug" value="{{ old('slug', $post->slug) }}" class="form-control" placeholder="se genera del título">
                </div>
                <div class="mb-3">
                    <label class="form-label">Extracto <span class="text-muted" id="exCount" style="font-size:.78rem;"></span></label>
                    <textarea name="excerpt" id="postExcerpt" rows="2" class="form-control" maxlength="1000">{{ old('excerpt', $post->excerpt) }}</textarea>
                </div>
                <div class="mb-2">
                    <label class="form-label">Cuerpo <span class="text-muted" style="font-size:.78rem;">(Markdown)</span></label>
                    <textarea name="body" rows="16" class="form-control" style="font-family:var(--font-data,monospace);font-size:.9rem;">{{ old('body', $post->body) }}</textarea>
                    <div class="form-text">Soporta Markdown: ## títulos, **negrita**, listas, [enlaces](url). Tiempo de lectura se calcula solo.</div>
                </div>
            </div>

            {{-- SEO --}}
            <div class="admin-card mt-3">
                <button type="button" class="btn-back" @click="seo = !seo" style="background:none;border:none;">⚙ SEO (opcional) <span x-text="seo ? '▲' : '▼'"></span></button>
                <div x-show="seo" x-cloak class="mt-3">
                    <div class="mb-3">
                        <label class="form-label">Meta título</label>
                        <input type="text" name="meta_title" value="{{ old('meta_title', $post->meta_title) }}" class="form-control" maxlength="255">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Meta descripción <span class="text-muted" id="metaCount" style="font-size:.78rem;"></span></label>
                        <textarea name="meta_description" id="metaDesc" rows="2" class="form-control" maxlength="500">{{ old('meta_description', $post->meta_description) }}</textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Meta keywords <span class="text-muted" style="font-size:.78rem;">separadas por comas — opcional, si se deja vacío se usan las etiquetas</span></label>
                        <input type="text" name="meta_keywords" value="{{ old('meta_keywords', $post->meta_keywords) }}" class="form-control" maxlength="255" placeholder="trazabilidad fermentados, control lotes kombucha, …">
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Imagen OG (compartir en redes)</label>
                        @if($post->og_image)<div class="mb-2"><img src="{{ $post->og_image_url }}" style="height:70px;border-radius:8px;"></div>@endif
                        <input type="file" name="og_image" accept="image/*" class="form-control">
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-4">
            <div class="admin-card">
                <div class="mb-3">
                    <label class="form-label">Estado</label>
                    <select name="status" x-model="status" class="form-select">
                        <option value="draft">Borrador</option>
                        <option value="published">Publicado</option>
                        <option value="scheduled">Programado</option>
                        <option value="archived">Archivado</option>
                    </select>
                </div>
                <div class="mb-3" x-show="status === 'scheduled'" x-cloak>
                    <label class="form-label">Publicar el</label>
                    <input type="datetime-local" name="published_at" value="{{ old('published_at', $post->published_at?->format('Y-m-d\TH:i')) }}" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label">Categoría</label>
                    <select name="blog_category_id" class="form-select">
                        <option value="">— Sin categoría —</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" @selected((string) old('blog_category_id', $post->blog_category_id) === (string) $cat->id)>{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Etiquetas</label>
                    <input type="text" name="tags" value="{{ old('tags', $post->exists ? $post->tags->pluck('name')->implode(', ') : '') }}" class="form-control" placeholder="kombucha, sin gluten">
                    <div class="form-text">Separadas por comas. Se crean al guardar.</div>
                </div>
                <div class="mb-3 form-check form-switch">
                    <input type="checkbox" name="featured" value="1" id="featured" class="form-check-input" @checked(old('featured', $post->featured))>
                    <label class="form-check-label" for="featured">Destacado</label>
                </div>
                <div class="mb-3">
                    <label class="form-label">Orden</label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', $post->sort_order ?? 0) }}" min="0" class="form-control">
                </div>
                <div class="mb-2">
                    <label class="form-label">Tiempo de lectura</label>
                    <input type="text" value="{{ $post->read_time_minutes }} min (auto)" class="form-control" readonly>
                </div>
            </div>

            <div class="admin-card mt-3">
                <label class="form-label">Imagen de portada</label>
                @if($post->cover_image)<div class="mb-2"><img src="{{ $post->cover_image_url }}" style="width:100%;border-radius:10px;"></div>@endif
                <input type="file" name="cover_image" accept="image/*" class="form-control">
                <div class="form-text">JPG/PNG/WebP, máx. 6&nbsp;MB.</div>
            </div>

            <button type="submit" class="btn btn-fermenty-primary w-100 mt-3">{{ $post->exists ? 'Guardar cambios' : 'Crear artículo' }}</button>
        </div>
    </div>
</form>

@push('scripts')
<script>
(function () {
    var title = document.getElementById('postTitle'), slug = document.getElementById('postSlug');
    var slugTouched = {{ $post->exists ? 'true' : 'false' }};
    function slugify(s){ return s.toString().toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g,'').replace(/[^a-z0-9]+/g,'-').replace(/(^-|-$)/g,''); }
    if (slug) slug.addEventListener('input', function(){ slugTouched = true; });
    if (title && slug) title.addEventListener('input', function(){ if(!slugTouched) slug.value = slugify(title.value); });
    function counter(el, out, target){ if(!el||!out) return; var f=function(){ out.textContent = el.value.length + (target?(' / '+target):'') ; }; el.addEventListener('input', f); f(); }
    counter(document.getElementById('postExcerpt'), document.getElementById('exCount'));
    counter(document.getElementById('metaDesc'), document.getElementById('metaCount'), 155);
})();
</script>
@endpush

@endsection