<x-site-layout title="Become a Trainer">

    {{-- Hero --}}
    <section class="relative bg-gradient-to-r from-blue-600 to-indigo-700 py-16">
        <div class="absolute inset-0 bg-black opacity-10"></div>
        <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <span class="inline-block px-4 py-1 bg-white bg-opacity-20 rounded-full text-white text-sm font-medium mb-4">
                <i class="fas fa-chalkboard-teacher mr-1"></i> Trainer Registration
            </span>
            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Become a Trainer</h1>
            <p class="text-blue-100 text-lg max-w-5xl mx-auto">
                Share your expertise and help shape the next generation of health professionals on the SSHIA platform.
            </p>
            <div class="flex flex-wrap justify-center gap-6 mt-8 text-sm text-blue-100">
                <span><i class="fas fa-check-circle mr-1"></i> Deliver Training Sessions</span>
                <span><i class="fas fa-check-circle mr-1"></i> Build Your Profile</span>
                <span><i class="fas fa-check-circle mr-1"></i> Earn Recognition</span>
                <span><i class="fas fa-check-circle mr-1"></i> Expand Your Reach</span>
            </div>
        </div>
    </section>

    {{-- 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-blue-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>
                <span class="text-gray-500">Register</span>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">Become a Trainer</span>
            </nav>
        </div>
    </div>

    <div class="bg-amber-50 border-b border-amber-200">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center gap-2 text-sm text-amber-800">
            <i class="fas fa-info-circle text-amber-500"></i>
            Applications are reviewed within <strong>3–5 business days</strong>. You will be notified by email.
        </div>
    </div>

    <section class="py-12 bg-gray-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">

            @if(session('error'))
                <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl flex items-center gap-2">
                    <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
                </div>
            @endif
            @if($errors->any())
                <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl">
                    <p class="font-medium flex items-center gap-2"><i class="fas fa-exclamation-triangle"></i> Please fix the errors below.</p>
                </div>
            @endif

            <form action="{{ route('register.role.trainer.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
                @csrf

                {{-- Personal Information --}}
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                        <h2 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-user text-blue-600"></i> Personal Information
                        </h2>
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">First Name <span class="text-red-500">*</span></label>
                            <input type="text" id="first_name" name="first_name" value="{{ old('first_name') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                                   placeholder="First name" required>
                            @error('first_name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="last_name" class="block text-sm font-medium text-gray-700 mb-1">Last Name <span class="text-red-500">*</span></label>
                            <input type="text" id="last_name" name="last_name" value="{{ old('last_name') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                                   placeholder="Last name" required>
                            @error('last_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 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                                   placeholder="your@email.com" 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') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                                   placeholder="+256 7XX XXX XXX" required>
                            @error('phone')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div class="md:col-span-2">
                            <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Address</label>
                            <input type="text" id="address" name="address" value="{{ old('address') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                                   placeholder="Street address">
                        </div>
                        <div>
                            <label for="city" class="block text-sm font-medium text-gray-700 mb-1">City</label>
                            <input type="text" id="city" name="city" value="{{ old('city') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                                   placeholder="City">
                        </div>
                        <div>
                            <label for="country" class="block text-sm font-medium text-gray-700 mb-1">Country</label>
                            <input type="text" id="country" name="country" value="{{ old('country') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                                   placeholder="Country">
                        </div>
                    </div>
                </div>

                {{-- Professional Details --}}
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                        <h2 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-award text-blue-600"></i> Professional Details
                        </h2>
                    </div>
                    <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label for="professional_title" class="block text-sm font-medium text-gray-700 mb-1">Professional Title <span class="text-red-500">*</span></label>
                            <input type="text" id="professional_title" name="professional_title" value="{{ old('professional_title') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                                   placeholder="e.g. Senior Health Educator" required>
                            @error('professional_title')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="specialization" class="block text-sm font-medium text-gray-700 mb-1">Specialization <span class="text-red-500">*</span></label>
                            <input type="text" id="specialization" name="specialization" value="{{ old('specialization') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                                   placeholder="e.g. Public Health, Nutrition" required>
                            @error('specialization')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="years_of_experience" class="block text-sm font-medium text-gray-700 mb-1">Years of Experience <span class="text-red-500">*</span></label>
                            <input type="number" id="years_of_experience" name="years_of_experience" value="{{ old('years_of_experience') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                                   min="0" max="60" placeholder="e.g. 5" required>
                            @error('years_of_experience')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="availability" class="block text-sm font-medium text-gray-700 mb-1">Availability <span class="text-red-500">*</span></label>
                            <select id="availability" name="availability"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition" required>
                                <option value="">-- Select Availability --</option>
                                <option value="Full-time" {{ old('availability') === 'Full-time' ? 'selected' : '' }}>Full-time</option>
                                <option value="Part-time" {{ old('availability') === 'Part-time' ? 'selected' : '' }}>Part-time</option>
                                <option value="Weekends only" {{ old('availability') === 'Weekends only' ? 'selected' : '' }}>Weekends only</option>
                                <option value="Flexible" {{ old('availability') === 'Flexible' ? 'selected' : '' }}>Flexible</option>
                            </select>
                            @error('availability')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div class="md:col-span-2">
                            <label for="certifications" class="block text-sm font-medium text-gray-700 mb-1">Certifications & Qualifications</label>
                            <textarea id="certifications" name="certifications" rows="3"
                                      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                                      placeholder="List your relevant certifications and qualifications...">{{ old('certifications') }}</textarea>
                        </div>
                    </div>
                </div>

                {{-- Expertise Areas --}}
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                        <h2 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-tags text-blue-600"></i> Areas of Expertise <span class="text-red-500">*</span>
                        </h2>
                    </div>
                    <div class="p-6">
                        @php
                            $expertiseOptions = ['Public Health','Nutrition','Mental Health','Maternal Health','Community Health','Health Education','Epidemiology','Health Policy','Clinical Training','First Aid & Emergency','Environmental Health','Other'];
                            $selectedExpertise = old('expertise_areas', []);
                        @endphp
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                            @foreach($expertiseOptions as $option)
                                <label class="flex items-center gap-2 cursor-pointer p-3 border border-gray-200 rounded-lg hover:bg-blue-50 hover:border-blue-300 transition">
                                    <input type="checkbox" name="expertise_areas[]" value="{{ $option }}"
                                           class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                                           {{ in_array($option, $selectedExpertise) ? 'checked' : '' }}>
                                    <span class="text-sm text-gray-700">{{ $option }}</span>
                                </label>
                            @endforeach
                        </div>
                        @error('expertise_areas')<p class="mt-2 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>

                {{-- Bio --}}
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                        <h2 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-align-left text-blue-600"></i> Professional Bio <span class="text-red-500">*</span>
                        </h2>
                    </div>
                    <div class="p-6">
                        <textarea id="bio" name="bio" rows="5"
                                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                                  placeholder="Tell us about your professional background, teaching philosophy, and what makes you an effective trainer..." required>{{ old('bio') }}</textarea>
                        @error('bio')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>

                {{-- CV Upload --}}
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                        <h2 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-file-upload text-blue-600"></i> CV / Credentials Upload
                        </h2>
                    </div>
                    <div class="p-6">
                        <label for="cv" class="block text-sm font-medium text-gray-700 mb-2">Upload your CV (PDF, DOC, DOCX — max 5MB)</label>
                        <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-blue-400 transition cursor-pointer"
                             onclick="document.getElementById('cv').click()">
                            <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
                            <p class="text-sm text-gray-500">Click to upload or drag and drop</p>
                            <p class="text-xs text-gray-400 mt-1">PDF, DOC, DOCX up to 5MB</p>
                            <input type="file" id="cv" name="cv" accept=".pdf,.doc,.docx" class="hidden"
                                   onchange="document.getElementById('cv-name').textContent = this.files[0]?.name || ''">
                        </div>
                        <p id="cv-name" class="mt-2 text-sm text-blue-600 font-medium"></p>
                        @error('cv')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>

                {{-- Account Security --}}
                <div class="bg-white rounded-2xl shadow-sm overflow-hidden">
                    <div class="bg-gray-50 px-6 py-4 border-b border-gray-100">
                        <h2 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-lock text-blue-600"></i> Account Security
                        </h2>
                    </div>
                    <div class="p-6">
                        @include('registration._partials.password-fields', ['color' => 'blue'])
                    </div>
                </div>

                {{-- Terms --}}
                <div class="bg-white rounded-2xl shadow-sm p-6">
                    <label class="flex items-start gap-3 cursor-pointer">
                        <input type="checkbox" name="terms_accepted" value="1"
                               class="mt-1 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                               {{ old('terms_accepted') ? 'checked' : '' }} required>
                        <span class="text-sm text-gray-600">
                            I agree to the <a href="{{ route('pages.terms') }}" class="text-blue-600 hover:underline" target="_blank">Terms and Conditions</a>
                            and <a href="{{ route('pages.privacy') }}" class="text-blue-600 hover:underline" target="_blank">Privacy Policy</a>.
                            I confirm all information provided is accurate. <span class="text-red-500">*</span>
                        </span>
                    </label>
                    @error('terms_accepted')<p class="mt-2 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>

                @include('registration._partials.bottom-nav', ['color' => 'blue', 'submitLabel' => 'Submit Trainer Application'])
            </form>
        </div>
    </section>

</x-site-layout>
