@extends('layouts.admin')

@section('title', 'Create Blog Article')

@section('content')
<div style="margin-bottom: 24px;">
    <a href="{{ route('admin.posts.index') }}" style="color: var(--text-muted); text-decoration: none; font-size: 13px;">← Back to Articles</a>
    <h1 class="serif" style="font-size: 26px; margin-top: 8px; color: #0f172a;">Write New Blog Article</h1>
</div>

<div class="admin-card" style="max-width: 800px;">
    <form action="{{ route('admin.posts.store') }}" method="POST">
        @csrf
        <div style="margin-bottom: 16px;">
            <label style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted);">Article Title *</label>
            <input type="text" name="title" class="form-control" required placeholder="e.g. Why Goat Milk Belongs In Your Skincare Routine">
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
            <div>
                <label style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted);">Category *</label>
                <input type="text" name="category" value="Ingredients" class="form-control" required placeholder="e.g. Ingredients, Routines, Hair Care">
            </div>
            <div>
                <label style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted);">Read Time</label>
                <input type="text" name="read_time" value="5 min read" class="form-control">
            </div>
        </div>

        <div style="margin-bottom: 16px;">
            <label style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted);">Short Summary / Excerpt *</label>
            <textarea name="excerpt" rows="2" class="form-control" required placeholder="A brief teaser summarizing the article..."></textarea>
        </div>

        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-muted);">Full Content (HTML allowed) *</label>
            <textarea name="content" rows="8" class="form-control" required placeholder="Write the full blog article content here..."></textarea>
        </div>

        <div style="margin-bottom: 24px; color: #334155;">
            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                <input type="checkbox" name="is_published" value="1" checked> Publish Immediately
            </label>
        </div>

        <div style="display: flex; gap: 12px;">
            <button type="submit" class="btn-admin btn-primary">Publish Article</button>
            <a href="{{ route('admin.posts.index') }}" class="btn-admin btn-secondary">Cancel</a>
        </div>
    </form>
</div>
@endsection