@extends('layouts.site')

@section('title', 'Share Your Story - Health Advocacy')
@section('meta-description', 'Share your health success story and inspire others in our community.')

@section('content')
<!-- Hero Section -->
<div class="bg-gradient-to-r from-rose-500 to-pink-600 shadow-lg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="text-center">
            <h1 class="text-4xl md:text-5xl font-serif font-bold text-white mb-4">
                <i class="fas fa-pen-alt mr-3"></i>
                Share Your Story
            </h1>
            <p class="text-xl text-rose-100 max-w-3xl mx-auto">
                Your health journey can inspire others. Share your experience and make a difference.
            </p>
        </div>
    </div>
</div>

<!-- Breadcrumb -->
<div class="bg-gray-50 border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
        <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
            <a href="{{ url('/') }}" class="hover:text-rose-600 transition flex items-center">
                <i class="fas fa-home mr-1"></i>Home
            </a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <a href="{{ route('advocacy.public.index') }}" class="hover:text-rose-600 transition">Advocacy</a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <a href="{{ route('advocacy.public.stories.index') }}" class="hover:text-rose-600 transition">Stories</a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <span class="text-gray-900 font-medium">Submit Story</span>
        </nav>
    </div>
</div>

<!-- Main Content -->
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <!-- Guidelines -->
    <div class="bg-rose-50 rounded-xl p-6 mb-8 border border-rose-200">
        <h3 class="font-semibold text-rose-900 mb-3">
            <i class="fas fa-info-circle text-rose-600 mr-2"></i>
            Story Guidelines
        </h3>
        <ul class="text-sm text-rose-800 space-y-1">
            <li>• Share authentic, personal health experiences</li>
            <li>• Include specific details and outcomes where possible</li>
            <li>• Be respectful and positive in your storytelling</li>
            <li>• Stories are reviewed before publication</li>
            <li>• You can submit anonymously if preferred</li>
        </ul>
    </div>

    @if(session('error'))
        <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
            <i class="fas fa-exclamation-circle mr-2"></i>
            {{ session('error') }}
        </div>
    @endif

    <form action="{{ route('advocacy.public.stories.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
        @csrf

        <!-- Author Information -->
        <div class="bg-white rounded-xl shadow-md p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                <i class="fas fa-user text-rose-500 mr-2"></i>
                Your Information
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Name -->
                <div>
                    <label for="author_name" class="block text-sm font-medium text-gray-700 mb-1">
                        Your Name <span class="text-red-500">*</span>
                    </label>
                    <input type="text" 
                           name="author_name" 
                           id="author_name"
                           value="{{ old('author_name', auth()->user()->name ?? '') }}"
                           required
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-transparent @error('author_name') border-red-500 @enderror">
                    @error('author_name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Email -->
                <div>
                    <label for="author_email" class="block text-sm font-medium text-gray-700 mb-1">
                        Email Address <span class="text-red-500">*</span>
                    </label>
                    <input type="email" 
                           name="author_email" 
                           id="author_email"
                           value="{{ old('author_email', auth()->user()->email ?? '') }}"
                           required
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-transparent @error('author_email') border-red-500 @enderror">
                    @error('author_email')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Phone -->
                <div>
                    <label for="author_phone" class="block text-sm font-medium text-gray-700 mb-1">
                        Phone Number (Optional)
                    </label>
                    <input type="tel" 
                           name="author_phone" 
                           id="author_phone"
                           value="{{ old('author_phone') }}"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-transparent">
                </div>

                <!-- Location -->
                <div>
                    <label for="location" class="block text-sm font-medium text-gray-700 mb-1">
                        Location
                    </label>
                    <input type="text" 
                           name="location" 
                           id="location"
                           value="{{ old('location') }}"
                           placeholder="City, Country"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-transparent">
                </div>
            </div>
        </div>

        <!-- Story Details -->
        <div class="bg-white rounded-xl shadow-md p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                <i class="fas fa-book-open text-rose-500 mr-2"></i>
                Your Story
            </h3>

            <div class="space-y-6">
                <!-- Campaign -->
                <div>
                    <label for="campaign_id" class="block text-sm font-medium text-gray-700 mb-1">
                        Related Campaign (Optional)
                    </label>
                    <select name="campaign_id" 
                            id="campaign_id"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-transparent">
                        <option value="">Select a campaign...</option>
                        @foreach($campaigns as $campaign)
                            <option value="{{ $campaign->id }}" {{ old('campaign_id') == $campaign->id ? 'selected' : '' }}>
                                {{ $campaign->title }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Title -->
                <div>
                    <label for="title" class="block text-sm font-medium text-gray-700 mb-1">
                        Story Title <span class="text-red-500">*</span>
                    </label>
                    <input type="text" 
                           name="title" 
                           id="title"
                           value="{{ old('title') }}"
                           required
                           placeholder="A compelling title for your story"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-transparent @error('title') border-red-500 @enderror">
                    @error('title')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Content -->
                <div>
                    <label for="content" class="block text-sm font-medium text-gray-700 mb-1">
                        Your Story <span class="text-red-500">*</span>
                    </label>
                    <textarea name="content" 
                              id="content"
                              rows="10"
                              required
                              placeholder="Share your health journey in detail. What challenges did you face? How did you overcome them? What lessons did you learn?"
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-transparent @error('content') border-red-500 @enderror">{{ old('content') }}</textarea>
                    @error('content')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Excerpt -->
                <div>
                    <label for="excerpt" class="block text-sm font-medium text-gray-700 mb-1">
                        Short Summary (Optional)
                    </label>
                    <textarea name="excerpt" 
                              id="excerpt"
                              rows="2"
                              placeholder="A brief summary of your story (will be auto-generated if left empty)"
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-transparent">{{ old('excerpt') }}</textarea>
                </div>
            </div>
        </div>

        <!-- Media Upload -->
        <div class="bg-white rounded-xl shadow-md p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                <i class="fas fa-images text-rose-500 mr-2"></i>
                Media (Optional)
            </h3>

            <div class="space-y-6">
                <!-- Featured Image -->
                <div>
                    <label for="featured_image" class="block text-sm font-medium text-gray-700 mb-1">
                        Featured Image
                    </label>
                    <input type="file" 
                           name="featured_image" 
                           id="featured_image"
                           accept="image/*"
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-transparent">
                    <p class="mt-1 text-xs text-gray-500">Recommended size: 1200x630px. Max 5MB.</p>
                </div>

                <!-- Gallery -->
                <div>
                    <label for="gallery" class="block text-sm font-medium text-gray-700 mb-1">
                        Gallery Images
                    </label>
                    <input type="file" 
                           name="gallery[]" 
                           id="gallery"
                           accept="image/*"
                           multiple
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-transparent">
                    <p class="mt-1 text-xs text-gray-500">You can select multiple images. Max 5 images, 2MB each.</p>
                </div>

                <!-- Video URL -->
                <div>
                    <label for="video_url" class="block text-sm font-medium text-gray-700 mb-1">
                        Video URL (Optional)
                    </label>
                    <input type="url" 
                           name="video_url" 
                           id="video_url"
                           value="{{ old('video_url') }}"
                           placeholder="https://youtube.com/watch?v=..."
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-transparent">
                    <p class="mt-1 text-xs text-gray-500">YouTube or Vimeo embed URL</p>
                </div>
            </div>
        </div>

        <!-- Consent -->
        <div class="bg-white rounded-xl shadow-md p-6">
            <label class="flex items-start gap-3">
                <input type="checkbox" 
                       name="consent" 
                       value="1"
                       required
                       class="mt-1 w-4 h-4 text-rose-600 border-gray-300 rounded focus:ring-rose-500">
                <span class="text-sm text-gray-700">
                    I confirm that this is my original story and I consent to its publication on the Health Advocacy platform. 
                    I understand that my story will be reviewed before publication.
                    <span class="text-red-500">*</span>
                </span>
            </label>
        </div>

        <!-- Submit -->
        <div class="flex items-center justify-between">
            <a href="{{ route('advocacy.public.stories.index') }}" 
               class="px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition">
                <i class="fas fa-arrow-left mr-2"></i>
                Cancel
            </a>
            <button type="submit" 
                    class="px-8 py-3 bg-rose-600 text-white rounded-lg font-semibold hover:bg-rose-700 transition shadow-lg">
                <i class="fas fa-paper-plane mr-2"></i>
                Submit Story
            </button>
        </div>
    </form>
</div>
@endsection
