@extends('layouts.frontend')
@section('title', 'Prayer Requests - ' . church_name())
@section('content')

<!-- Hero Section -->
<section class="relative py-24 bg-gradient-to-br from-royal-800 via-royal-900 to-gray-900 overflow-hidden">
    <div class="absolute inset-0">
        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1507692049790-de58290a4334?w=1920')] bg-cover bg-center opacity-20"></div>
        <div class="absolute inset-0 bg-gradient-to-r from-royal-900/95 to-royal-800/80"></div>
    </div>
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="text-center">
            <span class="inline-flex items-center gap-2 px-4 py-1 rounded-full bg-gold-500/20 text-gold-400 text-sm font-medium mb-6">
                <i class="fas fa-praying-hands"></i>
                Prayer Ministry
            </span>
            <h1 class="font-cinzel text-5xl md:text-6xl font-bold text-white mb-6">Prayer Requests</h1>
            <p class="text-xl text-gray-300 max-w-2xl mx-auto">
                "Cast all your anxiety on him because he cares for you." - 1 Peter 5:7
            </p>
        </div>
    </div>
</section>

<!-- Prayer Request Form -->
<section class="py-20 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="font-cinzel text-4xl font-bold text-gray-900 mb-4">Submit a Prayer Request</h2>
            <p class="text-gray-600">Share your prayer needs with us. Our prayer team will lift you up in prayer.</p>
        </div>
        
        @if(session('success'))
            <div class="bg-green-500/10 border border-green-500/30 rounded-xl p-4 mb-8 text-center">
                <i class="fas fa-check-circle text-green-500 text-2xl mb-2"></i>
                <p class="text-green-500 font-medium">{{ session('success') }}</p>
            </div>
        @endif
        
        <div class="bg-white rounded-2xl shadow-xl p-8">
            <form action="{{ route('frontend.prayer.submit') }}" method="POST" class="space-y-6">
                @csrf
                
                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Your Name *</label>
                        <input type="text" name="name" required 
                            class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-gold-500 focus:border-gold-500 @error('name') border-red-500 @enderror"
                            value="{{ auth()->check() ? auth()->user()->name : old('name') }}"
                            placeholder="Enter your name">
                        @error('name')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Email (optional)</label>
                        <input type="email" name="email" 
                            class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-gold-500 focus:border-gold-500 @error('email') border-red-500 @enderror"
                            value="{{ auth()->check() ? auth()->user()->email : old('email') }}"
                            placeholder="your@email.com">
                        @error('email')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Phone (optional)</label>
                    <input type="tel" name="phone" 
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-gold-500 focus:border-gold-500 @error('phone') border-red-500 @enderror"
                        value="{{ old('phone') }}"
                        placeholder="+233 XX XXX XXXX">
                    @error('phone')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Prayer Topic *</label>
                    <input type="text" name="title" required 
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-gold-500 focus:border-gold-500 @error('title') border-red-500 @enderror"
                        value="{{ old('title') }}"
                        placeholder="Brief description of your prayer request">
                    @error('title')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Prayer Request Details *</label>
                    <textarea name="request" rows="5" required 
                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-gold-500 focus:border-gold-500 @error('request') border-red-500 @enderror"
                        placeholder="Share your prayer request with us...">{{ old('request') }}</textarea>
                    @error('request')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-3">Privacy Setting</label>
                    <div class="flex flex-wrap gap-4">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="privacy" value="public" {{ old('privacy', 'public') == 'public' ? 'checked' : '' }} class="w-4 h-4 text-gold-500 focus:ring-gold-500">
                            <span class="text-gray-700">
                                <i class="fas fa-globe mr-1 text-gray-400"></i> Public - Share on prayer board
                            </span>
                        </label>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="privacy" value="church_staff" {{ old('privacy') == 'church_staff' ? 'checked' : '' }} class="w-4 h-4 text-gold-500 focus:ring-gold-500">
                            <span class="text-gray-700">
                                <i class="fas fa-users mr-1 text-gray-400"></i> Church Staff Only
                            </span>
                        </label>
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="radio" name="privacy" value="private" {{ old('privacy') == 'private' ? 'checked' : '' }} class="w-4 h-4 text-gold-500 focus:ring-gold-500">
                            <span class="text-gray-700">
                                <i class="fas fa-lock mr-1 text-gray-400"></i> Private - Leadership Only
                            </span>
                        </label>
                    </div>
                </div>
                
                <div class="pt-4">
                    <button type="submit" class="w-full md:w-auto px-8 py-4 bg-gold-500 text-white rounded-full font-semibold hover:bg-gold-600 transition-colors flex items-center justify-center gap-2">
                        <i class="fas fa-paper-plane"></i>
                        Submit Prayer Request
                    </button>
                </div>
            </form>
        </div>
    </div>
</section>

<!-- Recent Prayer Requests -->
@if($recentRequests->count() > 0)
<section class="py-20 bg-white">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="font-cinzel text-4xl font-bold text-gray-900 mb-4">Prayer Board</h2>
            <p class="text-gray-600">Join us in prayer for these needs</p>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($recentRequests as $prayer)
            <div class="bg-gray-50 rounded-xl p-6 border border-gray-100 hover:shadow-lg transition-shadow">
                <div class="flex items-start gap-4 mb-4">
                    <div class="w-12 h-12 rounded-full bg-royal-100 flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-praying-hands text-royal-600"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="font-semibold text-gray-900 truncate">{{ $prayer->title }}</h4>
                        <p class="text-sm text-gray-500">
                            @if($prayer->member)
                                {{ $prayer->member->full_name }}
                            @else
                                Anonymous
                            @endif
                            · {{ $prayer->created_at->diffForHumans() }}
                        </p>
                    </div>
                </div>
                <p class="text-gray-600 text-sm line-clamp-3">{{ Str::limit($prayer->request, 150) }}</p>
                <div class="mt-4 pt-4 border-t border-gray-200">
                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium
                        @if($prayer->status === 'pending') bg-yellow-100 text-yellow-700
                        @elseif($prayer->status === 'praying') bg-blue-100 text-blue-700
                        @else bg-green-100 text-green-700 @endif">
                        <i class="fas fa-circle text-xs"></i>
                        {{ ucfirst($prayer->status === 'praying' ? 'Being Prayed For' : $prayer->status) }}
                    </span>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- Prayer Meeting Info -->
<section class="py-20 bg-gradient-to-r from-royal-700 to-royal-800">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-white/10 flex items-center justify-center">
            <i class="fas fa-hands-praying text-4xl text-gold-400"></i>
        </div>
        <h2 class="font-cinzel text-4xl font-bold text-white mb-6">Join Our Prayer Meeting</h2>
        <p class="text-xl text-royal-200 mb-8">
            We hold prayer meetings every week. Come and experience the power of corporate prayer.
        </p>
        <div class="flex flex-wrap justify-center gap-4">
            <a href="{{ route('frontend.services') }}" class="px-8 py-4 bg-white text-royal-800 rounded-full font-semibold hover:bg-gray-100 transition-colors">
                <i class="fas fa-church mr-2"></i> View Service Times
            </a>
            <a href="{{ route('frontend.contact') }}" class="px-8 py-4 bg-gold-500 text-white rounded-full font-semibold hover:bg-gold-600 transition-colors">
                <i class="fas fa-phone mr-2"></i> Contact Us
            </a>
        </div>
    </div>
</section>

@endsection