@extends('admin.layouts.app')
@section('title', isset($blog) ? 'Edit Post' : 'New Post')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.blogs.index') }}">Blog Posts</a></li>
    <li class="breadcrumb-item active">{{ isset($blog) ? 'Edit' : 'New' }}</li>
@endsection

@section('content')
<div class="page-header">
    <h1><i class="fas fa-blog text-primary"></i> {{ isset($blog) ? 'Edit Blog Post' : 'New Blog Post' }}</h1>
    <a href="{{ route('admin.blogs.index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i> Back
    </a>
</div>

<form action="{{ isset($blog) ? route('admin.blogs.update', $blog) : route('admin.blogs.store') }}"
      method="POST" enctype="multipart/form-data">
    @csrf
    @if(isset($blog)) @method('PUT') @endif

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card mb-4">
                <div class="card-header">Post Content</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Post Title <span class="text-danger">*</span></label>
                        <input type="text" name="title" class="form-control @error('title') is-invalid @enderror"
                            value="{{ old('title', $blog->title ?? '') }}" data-slug-source required>
                        @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">URL Slug</label>
                        <div class="input-group">
                            <span class="input-group-text text-muted" style="font-size:.8rem">/blog/</span>
                            <input type="text" name="slug" class="form-control"
                                value="{{ old('slug', $blog->slug ?? '') }}">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Excerpt / Summary</label>
                        <textarea name="excerpt" class="form-control" rows="2"
                            placeholder="Short summary shown in blog listings...">{{ old('excerpt', $blog->excerpt ?? '') }}</textarea>
                    </div>
                    <div class="mb-0">
                        <label class="form-label fw-semibold">Content <span class="text-danger">*</span></label>
                        <textarea name="content" class="form-control @error('content') is-invalid @enderror" rows="14"
                            placeholder="Full blog post content...">{{ old('content', $blog->content ?? '') }}</textarea>
                        @error('content')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header"><i class="fas fa-search me-2 text-muted"></i>SEO</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">SEO Title</label>
                        <input type="text" name="seo_title" class="form-control" value="{{ old('seo_title', $blog->seo_title ?? '') }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Meta Keywords</label>
                        <input type="text" name="seo_keywords" class="form-control" value="{{ old('seo_keywords', $blog->seo_keywords ?? '') }}">
                    </div>
                    <div class="mb-0">
                        <label class="form-label fw-semibold">Meta Description</label>
                        <textarea name="seo_description" class="form-control" rows="2" maxlength="160">{{ old('seo_description', $blog->seo_description ?? '') }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-header">Publish</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Category</label>
                        <select name="blog_category_id" class="form-select">
                            <option value="">— Uncategorised —</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}" {{ old('blog_category_id', $blog->blog_category_id ?? '') == $cat->id ? 'selected' : '' }}>
                                    {{ $cat->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3 d-flex justify-content-between align-items-center">
                        <label class="form-label mb-0 fw-semibold">Published</label>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1"
                                {{ old('is_active', $blog->is_active ?? true) ? 'checked' : '' }}>
                        </div>
                    </div>
                    <div class="mb-3 d-flex justify-content-between align-items-center">
                        <label class="form-label mb-0 fw-semibold">Featured Post</label>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_featured" value="1"
                                {{ old('is_featured', $blog->is_featured ?? false) ? 'checked' : '' }}>
                        </div>
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-green">
                            <i class="fas fa-save me-2"></i>{{ isset($blog) ? 'Update Post' : 'Publish Post' }}
                        </button>
                        @if(isset($blog))
                        <a href="{{ route('admin.blogs.index') }}" class="btn btn-outline-secondary">Cancel</a>
                        @endif
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">Featured Image</div>
                <div class="card-body">
                    @if(isset($blog) && $blog->featured_image)
                    <div class="mb-3 text-center">
                        <img src="{{ Storage::url($blog->featured_image) }}" id="imgPreview"
                            class="img-fluid rounded" style="max-height:180px;object-fit:cover;width:100%">
                    </div>
                    @else
                    <div class="mb-3">
                        <img id="imgPreview" src="" class="img-fluid rounded d-none mb-2" style="max-height:180px;width:100%;object-fit:cover">
                        <div id="imgPlaceholder" class="p-4 text-center text-muted rounded" style="background:#f8f9fa;border:2px dashed #dee2e6">
                            <i class="fas fa-image fa-2x mb-2 opacity-50"></i>
                            <div style="font-size:.8rem">No image selected</div>
                        </div>
                    </div>
                    @endif
                    <input type="file" name="featured_image" class="form-control form-control-sm" accept="image/*"
                        onchange="
                            document.getElementById('imgPreview').src=URL.createObjectURL(this.files[0]);
                            document.getElementById('imgPreview').classList.remove('d-none');
                            document.getElementById('imgPlaceholder')?.classList.add('d-none');
                        ">
                    <div class="form-text">JPG, PNG, WEBP. Max 2MB.</div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection