@extends('admin.layout')

@section('title', isset($post) ? 'Edit Blog Post' : 'Create Blog Post')
@section('page-title', isset($post) ? 'Edit Blog Post' : 'Create Blog Post')
@section('page-subtitle', isset($post) ? 'Update blog post content' : 'Create a new blog post')

@section('content')
<div class="card" style="max-width:900px">
    <form action="{{ isset($post) ? route('admin.blog.update', $post->id) : route('admin.blog.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        @if(isset($post))
            @method('PUT')
        @endif

        <div class="form">
            <div class="form-group">
                <label>Title *</label>
                <input type="text" name="title" value="{{ old('title', $post->title ?? '') }}" required placeholder="Enter blog post title">
                @error('title')
                    <small style="color:#dc2626">{{ $message }}</small>
                @enderror
            </div>

            <div class="form-group">
                <label>Slug *</label>
                <input type="text" name="slug" value="{{ old('slug', $post->slug ?? '') }}" required placeholder="url-friendly-slug">
                @error('slug')
                    <small style="color:#dc2626">{{ $message }}</small>
                @enderror
            </div>

            <div class="form-group">
                <label>Excerpt</label>
                <textarea name="excerpt" rows="3" placeholder="Brief description...">{{ old('excerpt', $post->excerpt ?? '') }}</textarea>
                @error('excerpt')
                    <small style="color:#dc2626">{{ $message }}</small>
                @enderror
            </div>

            <div class="form-group">
                <label>Content *</label>
                <textarea name="content" rows="10" required placeholder="Write your blog post content...">{{ old('content', $post->content ?? '') }}</textarea>
                @error('content')
                    <small style="color:#dc2626">{{ $message }}</small>
                @enderror
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label>Category</label>
                    <input type="text" name="category" value="{{ old('category', $post->category ?? '') }}" placeholder="e.g., Web Development">
                    @error('category')
                        <small style="color:#dc2626">{{ $message }}</small>
                    @enderror
                </div>

                <div class="form-group">
                    <label>Published Date</label>
                    <input type="date" name="published_at" value="{{ old('published_at', isset($post) && $post->published_at ? $post->published_at->format('Y-m-d') : '') }}">
                    @error('published_at')
                        <small style="color:#dc2626">{{ $message }}</small>
                    @enderror
                </div>
            </div>

            <div class="form-group">
                <label>Featured Image</label>
                <input type="file" name="featured_image_file" accept="image/*" onchange="previewImage(this)">
                <small style="color:var(--muted);display:block;margin-top:5px">Upload a new image (JPG, PNG, GIF - Max 2MB) or enter a path below</small>
                
                <label style="margin-top:15px">Or enter image path manually</label>
                <input type="text" name="featured_image" value="{{ old('featured_image', $post->featured_image ?? '') }}" placeholder="assets/images/blog/image.png">
                
                @error('featured_image')
                    <small style="color:#dc2626">{{ $message }}</small>
                @enderror
                @error('featured_image_file')
                    <small style="color:#dc2626">{{ $message }}</small>
                @enderror
                
                <div id="image-preview-container" style="margin-top:10px">
                    @if(isset($post) && $post->featured_image)
                        <img src="{{ asset($post->featured_image) }}" alt="Featured" class="image-preview" id="preview-img">
                    @else
                        <img src="" alt="Preview" class="image-preview" id="preview-img" style="display:none">
                    @endif
                </div>
            </div>

            <div class="form-group">
                <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
                    <input type="checkbox" name="is_active" value="1" {{ old('is_active', $post->is_published ?? true) ? 'checked' : '' }}>
                    <span>Publish this post</span>
                </label>
            </div>

            <div class="form-actions">
                <a href="{{ route('admin.blog.index') }}" class="ghost" style="text-decoration:none;padding:11px 15px">Cancel</a>
                <button type="submit" class="primary">{{ isset($post) ? 'Update Post' : 'Create Post' }}</button>
                @if(isset($post))
                    <button type="button" class="btn-danger" onclick="if(confirm('Delete this post?')) document.getElementById('delete-form').submit()">Delete</button>
                @endif
            </div>
        </div>
    </form>

    @if(isset($post))
    <form id="delete-form" action="{{ route('admin.blog.destroy', $post->id) }}" method="POST" style="display:none">
        @csrf
        @method('DELETE')
    </form>
    @endif
</div>

<script>
function previewImage(input) {
    const preview = document.getElementById('preview-img');
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            preview.src = e.target.result;
            preview.style.display = 'block';
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endsection