@extends('layouts.public')

@section('title', 'समाज कल्याण सहायता आवेदन | Beneficiary Aid Request - Vishwas Sanstha Mata Maharani')

@section('content')
<!-- HERO -->
<section class="bg-gradient-to-r from-navy via-royal to-navy text-white py-16 relative overflow-hidden">
    <div class="absolute inset-0 opacity-10 bg-[radial-gradient(#C6A15B_1px,transparent_1px)] [background-size:16px_16px]"></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
        <span class="inline-block bg-gold/20 text-gold border border-gold/40 text-xs font-bold uppercase tracking-widest px-3 py-1 rounded-full mb-3">
            मानवीय संवेदना एवं सहयोग
        </span>
        <h1 class="text-3xl sm:text-5xl font-extrabold font-heading text-white mb-4">
            समाज कल्याण सहायता आवेदन प्रपत्र
        </h1>
        <p class="text-gold-light max-w-2xl mx-auto text-base sm:text-lg">
            यदि आप अथवा आपका कोई परिचित विषम परिस्थिति, बीमारी, शिक्षा या राशन की गंभीर समस्या से जूझ रहा है, तो विश्वास संस्था आपकी सहायता के लिए सदैव तत्पर है।
        </p>
    </div>
</section>

<!-- MAIN FORM -->
<section class="py-12 bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        
        @if(session('success'))
            <div class="mb-8 bg-emerald-50 border-2 border-emerald-500 p-5 rounded-2xl shadow-lg flex items-start gap-4">
                <div class="h-10 w-10 rounded-full bg-emerald-500 text-white flex items-center justify-center text-xl flex-shrink-0">
                    <i class="fa-solid fa-hands-holding-circle"></i>
                </div>
                <div>
                    <h3 class="text-base font-bold text-emerald-900">सहायता आवेदन प्राप्त हुआ!</h3>
                    <p class="text-sm text-emerald-800 mt-1">{{ session('success') }}</p>
                    <p class="text-xs text-emerald-700 font-bold mt-2">सीधी सहायता हेल्पलाइन: +91 9485877237</p>
                </div>
            </div>
        @endif

        <div class="bg-white rounded-3xl p-6 sm:p-10 border border-gold/40 shadow-sm">
            <div class="border-b pb-4 mb-6">
                <span class="text-gold font-bold text-xs uppercase tracking-widest">निःशुल्क सहायता प्रकोष्ठ</span>
                <h2 class="text-2xl font-bold text-navy font-heading mt-1">सहायता हेतु विवरण दर्ज करें</h2>
                <p class="text-xs sm:text-sm text-gray-500 mt-0.5">हमारे क्षेत्रीय कल्याण अधिकारी द्वारा भौतिक सत्यापन उपरांत सहायता स्वीकृत की जाती है।</p>
            </div>

            <form action="{{ route('welfare.aid.submit') }}" method="POST" class="space-y-5">
                @csrf
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">आवेदक / लाभार्थी का नाम *</label>
                        <input type="text" name="applicant_name" required value="{{ old('applicant_name') }}" placeholder="पूरा नाम"
                               class="w-full px-4 py-2.5 rounded-xl border border-gray-300 text-sm focus:border-gold focus:ring-1 focus:ring-gold">
                        @error('applicant_name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">मोबाइल नंबर *</label>
                        <input type="text" name="phone" required value="{{ old('phone') }}" placeholder="10 अंकों का फोन नंबर"
                               class="w-full px-4 py-2.5 rounded-xl border border-gray-300 text-sm focus:border-gold focus:ring-1 focus:ring-gold">
                        @error('phone') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">ईमेल (वैकल्पिक)</label>
                        <input type="email" name="email" value="{{ old('email') }}" placeholder="yourname@gmail.com"
                               class="w-full px-4 py-2.5 rounded-xl border border-gray-300 text-sm focus:border-gold focus:ring-1 focus:ring-gold">
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">सहायता की श्रेणी *</label>
                        <select name="aid_category" required class="w-full px-4 py-2.5 rounded-xl border border-gray-300 text-sm focus:border-gold focus:ring-1 focus:ring-gold bg-white">
                            <option value="">-- श्रेणी चुनें --</option>
                            <option value="medical_treatment">गंभीर बीमारी / चिकित्सालय उपचार सहायता</option>
                            <option value="annapurna_ration">अन्नपूर्णा सूखा राशन एवं भोजन सहायता</option>
                            <option value="education_support">बच्चों की शाला फीस / पाठ्यपुस्तक सहायता</option>
                            <option value="model_colony_housing">कच्चा मकान मरम्मत / आवास सहायता</option>
                            <option value="tribal_welfare">जनजातीय स्वरोजगार व वनोपज साधन सहायता</option>
                            <option value="emergency_relief">प्राकृतिक आपदा / आकस्मिक संकट सहायता</option>
                            <option value="other">अन्य आवश्यक सामाजिक सहायता</option>
                        </select>
                        @error('aid_category') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">ग्राम / वार्ड / मोहल्ला *</label>
                        <input type="text" name="village_or_colony" required value="{{ old('village_or_colony') }}" placeholder="ग्राम या मोहल्ले का नाम"
                               class="w-full px-4 py-2.5 rounded-xl border border-gray-300 text-sm focus:border-gold focus:ring-1 focus:ring-gold">
                        @error('village_or_colony') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">जिला *</label>
                        <select name="district" required class="w-full px-4 py-2.5 rounded-xl border border-gray-300 text-sm focus:border-gold focus:ring-1 focus:ring-gold bg-white">
                            <option value="">-- जिला चुनें --</option>
                            <option value="Jabalpur">जबलपुर (Jabalpur)</option>
                            <option value="Katni">कटनी (Katni)</option>
                            <option value="Mandla">मंडला (Mandla)</option>
                            <option value="Dindori">डिंडौरी (Dindori)</option>
                            <option value="Seoni">सिवनी (Seoni)</option>
                            <option value="Narsinghpur">नरसिंहपुर (Narsinghpur)</option>
                            <option value="Rewa">रीवा (Rewa)</option>
                            <option value="Other">अन्य जिला</option>
                        </select>
                        @error('district') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">मासिक पारिवारिक आय (अनुमानित)</label>
                        <input type="number" name="monthly_family_income" value="{{ old('monthly_family_income') }}" placeholder="₹ में (उदा. 6000)"
                               class="w-full px-4 py-2.5 rounded-xl border border-gray-300 text-sm focus:border-gold focus:ring-1 focus:ring-gold">
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-bold text-gray-700 uppercase mb-1.5">समस्या का विस्तृत विवरण *</label>
                    <textarea name="problem_statement" rows="4" required placeholder="कृपया अपनी समस्या, परिवार की स्थिति एवं अपेक्षित सहायता का विवरण विस्तार से लिखें..."
                              class="w-full px-4 py-2.5 rounded-xl border border-gray-300 text-sm focus:border-gold focus:ring-1 focus:ring-gold">{{ old('problem_statement') }}</textarea>
                    @error('problem_statement') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div class="p-4 bg-gray-50 rounded-2xl border border-gray-200 text-xs text-gray-600">
                    <p class="font-bold text-navy mb-1"><i class="fa-solid fa-shield-halved text-gold mr-1"></i> सत्यापन व गोपनीयता गारंटी</p>
                    <p>आपकी जानकारी केवल सहायता मूल्यांकन के लिए उपयोग की जाएगी। आवेदन दर्ज होने के पश्चात स्थानीय फील्ड अधिकारी 48 घंटे के भीतर संपर्क करेगा।</p>
                </div>

                <button type="submit" class="w-full py-4 bg-navy hover:bg-gold hover:text-navy text-white font-extrabold rounded-2xl text-base transition shadow-xl flex items-center justify-center gap-2">
                    <i class="fa-solid fa-hands-holding-heart text-gold"></i>
                    <span>सहायता आवेदन जमा करें (Submit Welfare Aid Request)</span>
                </button>
            </form>
        </div>
    </div>
</section>
@endsection