@extends('layouts.app')

@section('title', 'Become a Volunteer - CHEER MEDICS FOUNDATION')

@section('content')
<!-- VOLUNTEERS PAGE -->
<div class="pt-20">
    <section class="relative py-32 animated-bg text-white overflow-hidden"><div class="absolute inset-0 bg-black/30"></div><div class="relative max-w-7xl mx-auto px-4 text-center"><h1 class="text-6xl md:text-7xl font-black mb-6">Become a Volunteer</h1><p class="text-2xl max-w-4xl mx-auto">Join us in our mission to create a brighter future</p></div></section>
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid lg:grid-cols-2 gap-16">
                <div>
                    <h2 class="text-4xl font-black text-gray-900 mb-8">Why Volunteer?</h2>
                    <p class="text-gray-600 text-lg leading-relaxed mb-6">We rely on the generous support of dedicated volunteers like you. Medical school can be overwhelming, both academically and financially. As a volunteer, you can provide much-needed assistance and mentorship to medical students.</p>
                    <p class="text-gray-600 text-lg leading-relaxed mb-8">Our organization is committed to reaching out to marginalized medical students and medically disadvantaged elderly people. By sharing your knowledge, experience, and guidance, you can play a vital role in shaping futures.</p>
                    <div class="space-y-6">
                        <div class="flex items-start"><div class="w-14 h-14 gradient-primary rounded-2xl flex items-center justify-center mr-5 flex-shrink-0"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg></div><div><h3 class="text-xl font-black text-gray-900 mb-1">Medical Student Mentorship</h3><p class="text-gray-600">Guide students through academic and financial challenges</p></div></div>
                        <div class="flex items-start"><div class="w-14 h-14 gradient-primary rounded-2xl flex items-center justify-center mr-5 flex-shrink-0"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg></div><div><h3 class="text-xl font-black text-gray-900 mb-1">Workshop Organization</h3><p class="text-gray-600">Help organize training sessions and seminars</p></div></div>
                        <div class="flex items-start"><div class="w-14 h-14 gradient-primary rounded-2xl flex items-center justify-center mr-5 flex-shrink-0"><svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg></div><div><h3 class="text-xl font-black text-gray-900 mb-1">Elderly Healthcare Support</h3><p class="text-gray-600">Create awareness and contribute to sustainable solutions</p></div></div>
                    </div>
                </div>
                <div class="bg-white rounded-3xl shadow-2xl p-10 reveal">
                    <h3 class="text-3xl font-black text-gray-900 mb-8">Volunteer Application Form</h3>
                    @if(session('success'))
                        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-xl mb-6">{{ session('success') }}</div>
                    @endif
                    <form class="space-y-6" action="{{ route('volunteer.submit') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div>
                            <h4 class="text-xl font-black text-gray-900 mb-4">Personal Information</h4>
                            <div class="space-y-6">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <input type="text" name="first_name" required placeholder="First Name *" class="w-full px-4 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-600 focus:outline-none transition font-semibold">
                                    <input type="text" name="last_name" required placeholder="Last Name *" class="w-full px-4 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-600 focus:outline-none transition font-semibold">
                                </div>
                                <input type="email" name="email" required placeholder="Email Address *" class="w-full px-4 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-600 focus:outline-none transition font-semibold">
                                <input type="tel" name="phone" required placeholder="Phone Number *" class="w-full px-4 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-600 focus:outline-none transition font-semibold">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <input type="text" name="state" required placeholder="State *" class="w-full px-4 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-600 focus:outline-none transition font-semibold">
                                    <input type="text" name="city" required placeholder="City *" class="w-full px-4 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-600 focus:outline-none transition font-semibold">
                                </div>
                                <input type="text" name="occupation" placeholder="Occupation" class="w-full px-4 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-600 focus:outline-none transition font-semibold">
                                <input type="url" name="social_media" placeholder="Social Media Link (LinkedIn, Facebook, etc.)" class="w-full px-4 py-4 border-2 border-gray-200 rounded-xl focus:border-blue-600 focus:outline-none transition font-semibold">
                            </div>
                        </div>
                        <div>
                            <h4 class="text-xl font-black text-gray-900 mb-4">Volunteer Details</h4>
                            <div class="space-y-6">
                                <div>
                                    <label class="block text-gray-700 font-semibold mb-2">Volunteer Role *</label>
                                    <select name="volunteer_role" required class="w-full px-4 py-4 border-2 border-gray-200 rounded-xl focus:border-purple-600 focus:outline-none transition font-semibold">
                                        <option value="">Select Volunteer Role</option>
                                        <option>Mentor</option>
                                        <option>Event Coordinator</option>
                                        <option>Fundraiser</option>
                                        <option>Administrative Assistant</option>
                                        <option>Community Outreach Coordinator</option>
                                        <option>Volunteer Coordinator</option>
                                        <option>Social Media Manager</option>
                                        <option>Grant Writer</option>
                                        <option>Volunteer Trainer</option>
                                        <option>Hospital Visitor</option>
                                        <option>Elderly Companion</option>
                                        <option>Clinical Psychologist</option>
                                        <option>Partnership Coordinator</option>
                                        <option>Research Volunteer</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-gray-700 font-semibold mb-2">Area of Interest</label>
                                    <select name="area_of_interest" class="w-full px-4 py-4 border-2 border-gray-200 rounded-xl focus:border-purple-600 focus:outline-none transition font-semibold">
                                        <option value="">Select Area of Interest</option>
                                        <option>Medical Student Mentorship</option>
                                        <option>Workshop Organization</option>
                                        <option>Elderly Healthcare Support</option>
                                        <option>Environmental Awareness</option>
                                        <option>Research & Advocacy</option>
                                        <option>Fundraising & Development</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-gray-700 font-semibold mb-2">Availability</label>
                                    <select name="availability" class="w-full px-4 py-4 border-2 border-gray-200 rounded-xl focus:border-purple-600 focus:outline-none transition font-semibold">
                                        <option>Weekdays</option>
                                        <option>Weekends</option>
                                        <option>Evenings</option>
                                        <option>Flexible</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-gray-700 font-semibold mb-2">Why do you want to volunteer? *</label>
                                    <textarea name="motivation" required rows="5" placeholder="Tell us about your motivation and how you can contribute to our mission..." class="w-full px-4 py-4 border-2 border-gray-200 rounded-xl focus:border-purple-600 focus:outline-none transition font-semibold"></textarea>
                                </div>
                                <div>
                                    <label class="block text-gray-700 font-semibold mb-2">Relevant Experience or Skills</label>
                                    <textarea name="experience" rows="4" placeholder="Describe any relevant experience, skills, or qualifications..." class="w-full px-4 py-4 border-2 border-gray-200 rounded-xl focus:border-purple-600 focus:outline-none transition font-semibold"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 rounded-xl p-6 space-y-4">
                            <label class="flex items-start cursor-pointer"><input type="checkbox" name="agree_policies" required class="mt-1 mr-3 w-5 h-5 text-purple-600"><span class="text-gray-700 font-semibold text-sm">I agree to CHEER MEDICS FOUNDATION's volunteer policies and code of conduct *</span></label>
                            <label class="flex items-start cursor-pointer"><input type="checkbox" name="receive_updates" class="mt-1 mr-3 w-5 h-5 text-purple-600"><span class="text-gray-700 font-semibold text-sm">I would like to receive updates about volunteer opportunities</span></label>
                        </div>
                        <button type="submit" class="w-full gradient-primary text-white py-5 rounded-xl font-black text-lg hover:shadow-2xl transition-all transform hover:scale-105 flex items-center justify-center">Submit Application <svg class="w-6 h-6 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg></button>
                    </form>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection