@extends('layouts.app')

@section('title', 'New Content Brief')
@section('page-title', 'New Content Brief 🎬')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="cat-card p-4 lg:p-8">
        <form action="{{ route('content.store') }}" method="POST" class="space-y-4">
            @csrf

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div class="sm:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Title <span class="text-pink-400">*</span></label>
                    <input type="text" name="title" value="{{ old('title') }}" class="input-soft" required
                           placeholder="e.g. GRWM ft. Brand X Skincare">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Platform <span class="text-pink-400">*</span></label>
                    <select name="platform" class="input-soft" required>
                        <option value="instagram">📸 Instagram</option>
                        <option value="tiktok">🎵 TikTok</option>
                        <option value="youtube">▶️ YouTube</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Content Type</label>
                    <input type="text" name="content_type" value="{{ old('content_type') }}" class="input-soft"
                           placeholder="Reel, Short, GRWM, Story...">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Status</label>
                    <select name="status" class="input-soft">
                        @foreach($statuses as $s)
                            <option value="{{ $s->value }}" {{ old('status', request('status', 'drafting')) === $s->value ? 'selected' : '' }}>
                                {{ $s->icon() }} {{ $s->label() }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Client</label>
                    <select name="client_id" class="input-soft">
                        <option value="">— None —</option>
                        @foreach($clients as $client)
                            <option value="{{ $client->id }}">{{ $client->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Target Date</label>
                    <input type="date" name="target_date" value="{{ old('target_date') }}" class="input-soft">
                </div>
            </div>

            {{-- Storyline Maker --}}
            <div class="bg-pink-50 rounded-2xl p-4 space-y-3">
                <h3 class="font-bold text-gray-700 flex items-center gap-2 text-sm">✍️ Storyline Maker</h3>
                <div>
                    <label class="block text-xs font-semibold text-pink-600 mb-1">🎣 HOOK — Open with a bang!</label>
                    <textarea name="hook" rows="2" class="input-soft text-sm resize-none bg-white"
                              placeholder="e.g. 'POV: you finally found the moisturizer that doesn't break you out...'">{{ old('hook') }}</textarea>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-pink-600 mb-1">📖 BODY — Deliver the story</label>
                    <textarea name="body" rows="3" class="input-soft text-sm resize-none bg-white"
                              placeholder="The main content — what happens, product demo, value...">{{ old('body') }}</textarea>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-pink-600 mb-1">📣 CTA — Call to Action</label>
                    <textarea name="cta" rows="2" class="input-soft text-sm resize-none bg-white"
                              placeholder="e.g. 'Link in bio to shop! Use code KITTY for 15% off'">{{ old('cta') }}</textarea>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-500 mb-1">📝 Full Script (optional)</label>
                    <textarea name="script" rows="4" class="input-soft text-sm resize-none bg-white"
                              placeholder="Complete spoken script, timestamps, shot list...">{{ old('script') }}</textarea>
                </div>
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Caption</label>
                <textarea name="caption" rows="3" class="input-soft resize-none"
                          placeholder="Post caption text...">{{ old('caption') }}</textarea>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Hashtags</label>
                <input type="text" name="hashtags" value="{{ old('hashtags') }}" class="input-soft"
                       placeholder="#skincare #grwm #fyp">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Notes</label>
                <textarea name="notes" rows="2" class="input-soft resize-none"
                          placeholder="Any extra notes, brand requirements...">{{ old('notes') }}</textarea>
            </div>

            <div class="flex flex-col sm:flex-row gap-3 pt-1">
                <button type="submit" class="btn-sakura flex-1 py-3">🎬 Create Brief</button>
                <a href="{{ route('content.index') }}"
                   class="flex-1 py-3 text-center rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold text-sm">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection