@extends('layouts.app')

@section('content')
<section class="section light">
    <div class="container">
        <div class="post-header" style="margin-bottom: 40px;">
            <h1 style="font-size: 3rem;">Write a New Story</h1>
            <p>Share your impact, project updates, or community news with the world.</p>
        </div>

        <div class="form-container">
            @if($errors->any())
                <div class="alert-error">
                    <ul style="margin-left: 20px;">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('blog.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <label>Post Title</label>
                    <input type="text" name="title" value="{{ old('title') }}" placeholder="Enter a catchy title..." required autofocus>
                </div>

                <div class="form-group">
                    <label>Short Excerpt (Optional)</label>
                    <textarea name="excerpt" rows="3" placeholder="A brief summary of your post...">{{ old('excerpt') }}</textarea>
                </div>

                <div class="form-group">
                    <label>Article Content</label>
                    <textarea name="content" rows="12" placeholder="Start writing your story here..." required>{{ old('content') }}</textarea>
                </div>

                <div class="form-group">
                    <label>Featured Image</label>
                    <input type="file" name="image" accept="image/*">
                    <p style="font-size: 0.8rem; color: #888; margin-top: 10px;">Recommended size: 1200x600px (Max 5MB)</p>
                </div>

                <div style="text-align: right; margin-top: 40px;">
                    <a href="{{ route('blog') }}" style="margin-right: 20px; color: #666; text-decoration: none; font-weight: 600;">Cancel</a>
                    <button type="submit" class="button button-primary" style="margin: 0; padding: 16px 50px;">Publish Post</button>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection