@extends('layouts.nova.content-layout')

@php
    $hero_title = 'Create Story';
    $hero_description = 'Write a new creator story for your audience.';
@endphp

@section('page-content')
<div class="mx-auto max-w-3xl rounded-xl border border-gray-700 bg-gray-800/60 p-6">
    <form method="POST" action="{{ route('creator.stories.store') }}" class="space-y-5">
        @csrf

        <div>
            <label class="mb-1 block text-sm text-gray-200">Title</label>
            <input name="title" value="{{ old('title') }}" required class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white" />
        </div>

        <div>
            <label class="mb-1 block text-sm text-gray-200">Cover image URL</label>
            <input name="cover_image" value="{{ old('cover_image') }}" class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white" />
        </div>

        <div>
            <label class="mb-1 block text-sm text-gray-200">Excerpt</label>
            <textarea name="excerpt" rows="3" class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white">{{ old('excerpt') }}</textarea>
        </div>

        <div class="grid gap-4 md:grid-cols-2">
            <div>
                <label class="mb-1 block text-sm text-gray-200">Story type</label>
                <select name="story_type" class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white">
                    @foreach($storyTypes as $type)
                        <option value="{{ $type['slug'] }}">{{ $type['name'] }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="mb-1 block text-sm text-gray-200">Status</label>
                <select name="status" class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white">
                    <option value="draft">Draft</option>
                    <option value="published">Published</option>
                    <option value="scheduled">Scheduled</option>
                    <option value="archived">Archived</option>
                </select>
            </div>
        </div>

        <div>
            <label class="mb-1 block text-sm text-gray-200">Tags</label>
            <select name="tags[]" multiple class="min-h-28 w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white">
                @foreach($tags as $tag)
                    <option value="{{ $tag->id }}">{{ $tag->name }}</option>
                @endforeach
            </select>
        </div>

        <div>
            <label class="mb-1 block text-sm text-gray-200">Content (Markdown/HTML)</label>
            <textarea name="content" rows="14" required class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-white" placeholder="Write your story...">{{ old('content') }}</textarea>
        </div>

        <button class="rounded-lg border border-sky-500/40 bg-sky-500/10 px-4 py-2 text-sky-200 transition hover:scale-[1.02]">Save story</button>
    </form>
</div>
@endsection