@extends('layouts.frontend')

@section('title', 'Apply Now - Trade Plus Education')

@section('content')

<!-- Hero Section -->
<section class="bg-gradient-to-r from-blue-900 to-blue-700 text-white py-16">
    <div class="container mx-auto px-4">
        <h1 class="text-4xl lg:text-5xl font-bold mb-4 text-center">Start Your Journey Today</h1>
        <p class="text-xl text-center text-blue-100 max-w-3xl mx-auto">
            Fill out the application form below and our expert counselors will contact you within 24 hours
        </p>
    </div>
</section>

<!-- Application Form -->
<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto">
            @if(session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-6 py-4 rounded-lg mb-6">
                <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
            </div>
            @endif

            <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-6">Application Form</h2>

                <form action="{{ route('apply.store') }}" method="POST" class="space-y-6">
                    @csrf

                    <!-- Personal Information -->
                    <div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-4 border-b pb-2">Personal Information</h3>
                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-gray-700 font-medium mb-2">Full Name *</label>
                                <input type="text" name="full_name" required
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                    value="{{ old('full_name') }}">
                                @error('full_name')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

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

                            <div>
                                <label class="block text-gray-700 font-medium mb-2">Phone Number *</label>
                                <input type="tel" name="phone" required
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                    value="{{ old('phone') }}" placeholder="+880">
                                @error('phone')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-gray-700 font-medium mb-2">WhatsApp Number</label>
                                <input type="tel" name="whatsapp"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                    value="{{ old('whatsapp') }}" placeholder="+82">
                                @error('whatsapp')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-gray-700 font-medium mb-2">Date of Birth</label>
                                <input type="date" name="date_of_birth"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                    value="{{ old('date_of_birth') }}">
                            </div>

                            <div>
                                <label class="block text-gray-700 font-medium mb-2">Gender</label>
                                <select name="gender"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    <option value="">Select Gender</option>
                                    <option value="male" {{ old('gender')=='male' ? 'selected' : '' }}>Male</option>
                                    <option value="female" {{ old('gender')=='female' ? 'selected' : '' }}>Female
                                    </option>
                                    <option value="other" {{ old('gender')=='other' ? 'selected' : '' }}>Other</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Academic Information -->
                    <div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-4 border-b pb-2">Academic Information</h3>
                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-gray-700 font-medium mb-2">Current Education Level *</label>
                                <select name="education_level" required
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    <option value="">Select Level</option>
                                    <option value="SSC">SSC</option>
                                    <option value="HSC">HSC</option>
                                    <option value="Bachelors">Bachelor's Degree</option>
                                    <option value="Masters">Master's Degree</option>
                                </select>
                                @error('education_level')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-gray-700 font-medium mb-2">Field of Study</label>
                                <input type="text" name="field_of_study"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                    value="{{ old('field_of_study') }}" placeholder="e.g., Science, Business">
                            </div>

                            <div>
                                <label class="block text-gray-700 font-medium mb-2">English Proficiency</label>
                                <select name="english_proficiency"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    <option value="">Select Level</option>
                                    <option value="IELTS 6.0+">IELTS 6.0+</option>
                                    <option value="IELTS 6.5+">IELTS 6.5+</option>
                                    <option value="TOEFL 80+">TOEFL 80+</option>
                                    <option value="Not Yet">Not Yet</option>
                                    <option value="Planning to Take">Planning to Take</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Study Preferences -->
                    <div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-4 border-b pb-2">Study Preferences</h3>
                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-gray-700 font-medium mb-2">Preferred Destination *</label>
                                <select name="preferred_destination" required
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    <option value="">Select Country</option>
                                    @foreach($destinations as $destination)
                                    <option value="{{ $destination->country_name_en }}">
                                        {{ $destination->flag_emoji }} {{ $destination->country_name_en }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('preferred_destination')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-gray-700 font-medium mb-2">Preferred Course/Major</label>
                                <input type="text" name="preferred_course"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                    value="{{ old('preferred_course') }}" placeholder="e.g., Computer Science">
                            </div>

                            <div>
                                <label class="block text-gray-700 font-medium mb-2">Intake Year</label>
                                <select name="intake_year"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    <option value="">Select Year</option>
                                    <option value="2026 Spring">2026 Spring</option>
                                    <option value="2026 Fall">2026 Fall</option>
                                    <option value="2027 Spring">2027 Spring</option>
                                    <option value="2027 Fall">2027 Fall</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Information -->
                    <div>
                        <label class="block text-gray-700 font-medium mb-2">Additional Message</label>
                        <textarea name="message" rows="4"
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            placeholder="Tell us more about your educational goals and any questions you have...">{{ old('message') }}</textarea>
                    </div>

                    <!-- Submit Button -->
                    <div class="flex gap-4">
                        <button type="submit"
                            class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-lg transition text-lg">
                            <i class="fas fa-paper-plane mr-2"></i> Submit Application
                        </button>
                        <a href="https://wa.me/821032662956" target="_blank"
                            class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 px-8 rounded-lg transition text-lg">
                            <i class="fab fa-whatsapp mr-2"></i> WhatsApp
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- Why Choose Us -->
<section class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Why Choose Trade Plus Education?</h2>
        <div class="grid md:grid-cols-4 gap-8">
            <div class="text-center">
                <div class="text-blue-600 text-5xl mb-4"><i class="fas fa-award"></i></div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">Expert Counselors</h3>
                <p class="text-gray-600">Experienced team with 10+ years in international education</p>
            </div>
            <div class="text-center">
                <div class="text-blue-600 text-5xl mb-4"><i class="fas fa-check-circle"></i></div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">95% Success Rate</h3>
                <p class="text-gray-600">Proven track record in visa approvals</p>
            </div>
            <div class="text-center">
                <div class="text-blue-600 text-5xl mb-4"><i class="fas fa-headset"></i></div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">24/7 Support</h3>
                <p class="text-gray-600">We're here to help you every step of the way</p>
            </div>
            <div class="text-center">
                <div class="text-blue-600 text-5xl mb-4"><i class="fas fa-dollar-sign"></i></div>
                <h3 class="text-xl font-semibold text-gray-900 mb-2">No Hidden Fees</h3>
                <p class="text-gray-600">Transparent pricing and honest guidance</p>
            </div>
        </div>
    </div>
</section>

@endsection