@extends('admin.layouts.app')
@section('title', 'Edit Blog Post')
@section('page-title', 'Edit Story')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="glass-strong rounded-3xl p-8 border border-white/5 shadow-2xl">
        <form action="{{ route('admin.blogs.update', $blog) }}" method="POST" enctype="multipart/form-data" class="space-y-8">
            @csrf
            @method('PATCH')
            
            <div class="space-y-2">
                <label class="text-sm font-bold text-slate-400">Article Title</label>
                <input type="text" name="title" value="{{ $blog->title }}" class="w-full bg-white/5 border border-white/10 rounded-2xl py-4 px-6 text-white text-2xl font-bold" required>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <div class="md:col-span-2 space-y-2">
                    <label class="text-sm font-bold text-slate-400">Post Content (HTML)</label>
                    <textarea name="content" rows="15" class="w-full bg-white/5 border border-white/10 rounded-2xl py-4 px-6 text-white font-mono text-sm">{{ $blog->content }}</textarea>
                </div>

                <div class="space-y-6">
                    <div class="space-y-2">
                        <label class="text-sm font-bold text-slate-400">Featured Image</label>
                        @if($blog->featured_image)
                        <img src="{{ $blog->featured_image }}" class="w-full h-32 rounded-xl object-cover mb-4 border border-white/10">
                        @endif
                        <input type="file" name="image" class="w-full bg-white/5 border border-white/10 rounded-2xl py-2 px-4 text-xs text-white">
                    </div>

                    <div class="space-y-2">
                        <label class="text-sm font-bold text-slate-400">Image Alt Text</label>
                        <input type="text" name="image_alt" value="{{ $blog->image_alt }}" class="w-full bg-white/5 border border-white/10 rounded-xl py-3 px-4 text-xs text-white">
                    </div>

                    <div class="space-y-2">
                        <label class="text-sm font-bold text-slate-400">Category</label>
                        <select name="blog_category_id" class="w-full bg-dark-700 border border-white/10 rounded-xl py-3 px-4 text-white text-sm">
                            <option value="">Select Category</option>
                            @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ $blog->blog_category_id == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="space-y-2">
                        <label class="text-sm font-bold text-slate-400">Status</label>
                        <select name="status" class="w-full bg-dark-700 border border-white/10 rounded-xl py-3 px-4 text-white text-sm">
                            <option value="draft" {{ $blog->status == 'draft' ? 'selected' : '' }}>Draft</option>
                            <option value="published" {{ $blog->status == 'published' ? 'selected' : '' }}>Published</option>
                        </select>
                    </div>

                    <div class="space-y-2">
                        <label class="text-sm font-bold text-slate-400">Publish Date</label>
                        <input type="date" name="published_at" value="{{ $blog->published_at ? $blog->published_at->format('Y-m-d') : '' }}" class="w-full bg-white/5 border border-white/10 rounded-xl py-3 px-4 text-white text-sm">
                    </div>
                </div>
            </div>

            {{-- SEO Section --}}
            <div class="p-8 bg-neon-purple/5 rounded-[2.5rem] border border-neon-purple/10 space-y-6">
                <h3 class="text-xl font-black text-neon-purple flex items-center">
                    <i class="fas fa-search mr-3"></i> SEO & URL Management
                </h3>
                
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="space-y-2">
                        <label class="text-sm font-bold text-slate-400">Custom Slug</label>
                        <input type="text" name="slug" value="{{ $blog->slug }}" class="w-full bg-dark-700 border border-white/10 rounded-2xl py-4 px-6 text-white text-sm">
                    </div>
                    <div class="space-y-2">
                        <label class="text-sm font-bold text-slate-400">Meta Title</label>
                        <input type="text" name="meta_title" value="{{ $blog->meta_title }}" class="w-full bg-dark-700 border border-white/10 rounded-2xl py-4 px-6 text-white text-sm">
                    </div>
                    <div class="col-span-2 space-y-2">
                        <label class="text-sm font-bold text-slate-400">Meta Description</label>
                        <textarea name="meta_description" rows="2" class="w-full bg-dark-700 border border-white/10 rounded-2xl py-4 px-6 text-white text-sm">{{ $blog->meta_description }}</textarea>
                    </div>
                </div>
            </div>

            <div class="flex space-x-4 pt-4">
                <button type="submit" class="flex-1 bg-neon-purple hover:bg-neon-purple/80 text-white py-4 rounded-2xl font-bold text-lg transition-all shadow-xl shadow-neon-purple/20">
                    Update Blog Post
                </button>
                <a href="{{ route('admin.blogs.index') }}" class="px-8 py-4 rounded-2xl bg-white/5 text-slate-400 font-bold hover:bg-white/10 transition-all border border-white/10">
                    Exit Editor
                </a>
            </div>
        </form>
    </div>
</div>
@endsection