<x-site-layout title="Apply for Mentorship" meta-description="Submit your application for our mentorship programme">
    {{-- Hero Section — Advocacy Style --}}
    <div class="relative bg-gradient-to-r from-green-700 to-emerald-800 shadow-xl">
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <div class="text-center">
                <span class="inline-block px-4 py-1 bg-white/20 text-white rounded-full text-sm font-semibold mb-4">
                    <i class="fas fa-user-plus mr-2"></i> Application Form
                </span>
                <h1 class="text-4xl md:text-5xl font-serif font-bold text-white mb-4">
                    Apply for Mentorship
                </h1>
                <p class="text-xl text-green-100 max-w-3xl mx-auto mb-6">
                    {{ $programme->title }}
                </p>
                <p class="text-green-200 text-sm">
                    {{ $programme->duration_text }} · {{ $programme->category->name ?? 'General' }}
                </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-green-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('mentorship.public.index') }}" class="hover:text-green-600 transition">Mentorship</a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <a href="{{ route('mentorship.public.programme', $programme) }}" class="hover:text-green-600 transition">{{ Str::limit($programme->title, 40) }}</a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">Apply</span>
            </nav>
        </div>
    </div>

    {{-- Application Form --}}
    <section class="py-12 bg-gray-50">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            {{-- Programme Summary --}}
            <div class="bg-white rounded-2xl shadow-sm p-6 mb-8">
                <div class="flex items-center gap-4">
                    <div class="w-16 h-16 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-chalkboard-teacher text-green-600 text-2xl"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-gray-900">{{ $programme->title }}</h1>
                        <p class="text-gray-500">{{ $programme->duration_text }} • {{ $programme->category->name ?? 'General' }}</p>
                    </div>
                </div>
            </div>

            @if(session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-6">
                    <i class="fas fa-check-circle mr-2"></i>
                    {{ session('success') }}
                </div>
            @endif

            @if($errors->any())
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-6">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Please fix the errors below.
                </div>
            @endif

            <form action="{{ route('mentorship.public.apply.store') }}" method="POST" 
                  x-data="applicationForm()" @submit.prevent="submitForm">
                @csrf

                <input type="hidden" name="programme_id" value="{{ $programme->id }}">

                {{-- Step Progress --}}
                <div class="flex items-center justify-between mb-8 px-4">
                    <template x-for="step in totalSteps" :key="step">
                        <div class="flex items-center">
                            <div class="flex items-center justify-center w-10 h-10 rounded-full text-sm font-semibold transition-colors"
                                 :class="currentStep >= step ? 'bg-green-600 text-white' : 'bg-gray-200 text-gray-600'">
                                <span x-text="step"></span>
                            </div>
                            <span class="ml-2 text-sm font-medium hidden sm:inline"
                                  :class="currentStep >= step ? 'text-green-600' : 'text-gray-400'"
                                  x-text="['Personal Info', 'Preferences', 'Background', 'Review'][step - 1]"></span>
                            <div x-show="step < totalSteps" class="w-8 sm:w-16 h-1 mx-2"
                                 :class="currentStep > step ? 'bg-green-600' : 'bg-gray-200'"></div>
                        </div>
                    </template>
                </div>

                {{-- Step 1: Personal Info --}}
                <div x-show="currentStep === 1" class="space-y-6">
                    <div class="bg-white rounded-2xl shadow-sm p-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-6">
                            <i class="fas fa-user text-green-600 mr-2"></i>
                            Personal Information
                        </h2>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">
                                    Full Name <span class="text-red-500">*</span>
                                </label>
                                <input type="text" id="name" name="name" 
                                       value="{{ old('name') }}"
                                       class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500"
                                       required>
                                @error('name')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

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

                            <div>
                                <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">
                                    Phone Number <span class="text-red-500">*</span>
                                </label>
                                <input type="tel" id="phone" name="phone" 
                                       value="{{ old('phone') }}"
                                       placeholder="+256 7XX XXX XXX"
                                       class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500"
                                       required>
                                @error('phone')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="country" class="block text-sm font-medium text-gray-700 mb-1">
                                    Country
                                </label>
                                <select id="country" name="country" 
                                        class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                                    <option value="">Select Country</option>
                                    <option value="UG" {{ old('country') === 'UG' ? 'selected' : '' }}>Uganda</option>
                                    <option value="KE" {{ old('country') === 'KE' ? 'selected' : '' }}>Kenya</option>
                                    <option value="TZ" {{ old('country') === 'TZ' ? 'selected' : '' }}>Tanzania</option>
                                    <option value="RW" {{ old('country') === 'RW' ? 'selected' : '' }}>Rwanda</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Step 2: Preferences --}}
                <div x-show="currentStep === 2" class="space-y-6">
                    <div class="bg-white rounded-2xl shadow-sm p-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-6">
                            <i class="fas fa-sliders-h text-green-600 mr-2"></i>
                            Your Preferences
                        </h2>

                        <div class="space-y-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-3">
                                    I want to participate as a <span class="text-red-500">*</span>
                                </label>
                                <div class="grid grid-cols-2 gap-4">
                                    <label class="relative flex cursor-pointer rounded-lg border p-4 focus:outline-none"
                                           :class="rolePreference === 'mentee' ? 'border-green-600 bg-green-50' : 'border-gray-200'">
                                        <input type="radio" name="role_preference" value="mentee" 
                                               class="sr-only" x-model="rolePreference"
                                               {{ old('role_preference') === 'mentee' ? 'checked' : '' }}>
                                        <div class="flex flex-col">
                                            <i class="fas fa-user-graduate text-2xl mb-2" 
                                               :class="rolePreference === 'mentee' ? 'text-green-600' : 'text-gray-400'"></i>
                                            <span class="font-medium" :class="rolePreference === 'mentee' ? 'text-green-900' : 'text-gray-900'">
                                                Mentee
                                            </span>
                                            <span class="text-sm text-gray-500">I want to learn</span>
                                        </div>
                                    </label>
                                    <label class="relative flex cursor-pointer rounded-lg border p-4 focus:outline-none"
                                           :class="rolePreference === 'mentor' ? 'border-green-600 bg-green-50' : 'border-gray-200'">
                                        <input type="radio" name="role_preference" value="mentor" 
                                               class="sr-only" x-model="rolePreference"
                                               {{ old('role_preference') === 'mentor' ? 'checked' : '' }}>
                                        <div class="flex flex-col">
                                            <i class="fas fa-user-tie text-2xl mb-2"
                                               :class="rolePreference === 'mentor' ? 'text-green-600' : 'text-gray-400'"></i>
                                            <span class="font-medium" :class="rolePreference === 'mentor' ? 'text-green-900' : 'text-gray-900'">
                                                Mentor
                                            </span>
                                            <span class="text-sm text-gray-500">I want to guide</span>
                                        </div>
                                    </label>
                                </div>
                                @error('role_preference')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="category_id" class="block text-sm font-medium text-gray-700 mb-1">
                                    Area of Interest
                                </label>
                                <select id="category_id" name="category_id" 
                                        class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500">
                                    <option value="">Select an area</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Step 3: Background --}}
                <div x-show="currentStep === 3" class="space-y-6">
                    <div class="bg-white rounded-2xl shadow-sm p-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-6">
                            <i class="fas fa-briefcase text-green-600 mr-2"></i>
                            Your Background
                        </h2>

                        <div class="space-y-6">
                            <div>
                                <label for="experience" class="block text-sm font-medium text-gray-700 mb-1">
                                    Relevant Experience
                                </label>
                                <textarea id="experience" name="experience" rows="4"
                                          class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500"
                                          placeholder="Tell us about your professional background and any relevant experience...">{{ old('experience') }}</textarea>
                            </div>

                            <div>
                                <label for="motivation" class="block text-sm font-medium text-gray-700 mb-1">
                                    Why do you want to join this programme?
                                </label>
                                <textarea id="motivation" name="motivation" rows="4"
                                          class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500"
                                          placeholder="Share your motivation and what you hope to achieve...">{{ old('motivation') }}</textarea>
                            </div>

                            <div>
                                <label for="expectations" class="block text-sm font-medium text-gray-700 mb-1">
                                    What are your expectations?
                                </label>
                                <textarea id="expectations" name="expectations" rows="3"
                                          class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500"
                                          placeholder="What specific outcomes are you hoping for?">{{ old('expectations') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Step 4: Review & Submit --}}
                <div x-show="currentStep === 4" class="space-y-6">
                    <div class="bg-white rounded-2xl shadow-sm p-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-6">
                            <i class="fas fa-check-circle text-green-600 mr-2"></i>
                            Review Your Application
                        </h2>

                        {{-- Payment Notice --}}
                        @if(!$programme->is_free)
                            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
                                <div class="flex items-center">
                                    <i class="fas fa-info-circle text-yellow-600 mr-3"></i>
                                    <div>
                                        <h4 class="font-medium text-yellow-800">Payment Required</h4>
                                        <p class="text-sm text-yellow-700">
                                            This programme requires a payment of 
                                            <strong>{{ number_format($programme->fee_amount, 2) }} {{ $programme->currency }}</strong>.
                                            You will be redirected to complete payment after submitting your application.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endif

                        {{-- Terms --}}
                        <div class="mb-6">
                            <label class="flex items-start">
                                <input type="checkbox" name="terms" value="1" required
                                       class="mt-1 w-4 h-4 text-green-600 border-gray-300 rounded focus:ring-green-500">
                                <span class="ml-3 text-sm text-gray-600">
                                    I agree to the <a href="#" class="text-green-600 hover:underline">terms and conditions</a> 
                                    and understand that the information provided will be used to process my application.
                                </span>
                            </label>
                        </div>

                        <div class="p-4 bg-gray-50 rounded-lg">
                            <p class="text-sm text-gray-600">
                                By submitting this application, you confirm that all information provided is accurate 
                                and complete. Our team will review your application and get back to you within 3-5 business days.
                            </p>
                        </div>
                    </div>
                </div>

                {{-- Navigation Buttons --}}
                <div class="flex justify-between mt-8">
                    <button type="button" @click="previousStep()" 
                            x-show="currentStep > 1"
                            class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition font-medium">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Previous
                    </button>
                    <div></div>
                    
                    <button type="button" @click="nextStep()" 
                            x-show="currentStep < totalSteps"
                            class="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium">
                        Continue
                        <i class="fas fa-arrow-right ml-2"></i>
                    </button>

                    <button type="submit" 
                            x-show="currentStep === totalSteps"
                            class="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-semibold">
                        <i class="fas fa-paper-plane mr-2"></i>
                        Submit Application
                    </button>
                </div>
            </form>
        </div>
    </section>
</x-site-layout>

@push('scripts')
<script>
    function applicationForm() {
        return {
            currentStep: 1,
            totalSteps: 4,
            rolePreference: '{{ old('role_preference', 'mentee') }}',

            nextStep() {
                if (this.currentStep < this.totalSteps) {
                    this.currentStep++;
                }
            },

            previousStep() {
                if (this.currentStep > 1) {
                    this.currentStep--;
                }
            },

            submitForm(event) {
                event.target.submit();
            }
        }
    }
</script>
@endpush
