@extends('layouts.site')

@section('meta')
    <meta name="description" content="Apply for {{ $package->name }} training program.">
@endsection

@section('styles')
<style>
    .training-hero {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
    }
    .form-card {
        transition: all 0.3s ease;
    }
    .form-card:focus-within {
        box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
    }
</style>
@endsection

@section('content')
{{-- Hero Section --}}
<section class="training-hero text-white py-12">
    <div class="container mx-auto px-4">
        <div class="max-w-4xl">
            <h1 class="text-3xl font-bold mb-2">Apply for Training</h1>
            <p class="text-green-100">Complete the form below to register for {{ $package->name }}</p>
        </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-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('public.training.index') }}" class="hover:text-green-600 transition">Training Programs</a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <a href="{{ route('public.training.show', $package) }}" class="hover:text-green-600 transition">{{ $package->name }}</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="container mx-auto px-4">
        <div class="max-w-3xl mx-auto">
            {{-- Program Summary Card --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
                <div class="flex items-start gap-4">
                    @if($package->featured_image)
                        <img src="{{ $package->featured_image }}" 
                             alt="{{ $package->name }}"
                             class="w-20 h-20 object-cover rounded-lg">
                    @else
                        <div class="w-20 h-20 bg-green-100 rounded-lg flex items-center justify-center">
                            <i class="fas fa-book text-green-600 text-2xl"></i>
                        </div>
                    @endif
                    <div class="flex-1">
                        <h2 class="text-xl font-semibold text-gray-800">{{ $package->name }}</h2>
                        <div class="flex flex-wrap gap-4 mt-2 text-sm text-gray-600">
                            <span><i class="fas fa-clock mr-1"></i>{{ $package->duration_hours }} hours</span>
                            <span><i class="fas fa-users mr-1"></i>{{ $package->capacity - $package->registrations_count }} spots left</span>
                        </div>
                    </div>
                    <div class="text-right">
                        @if($package->is_free)
                            <p class="text-2xl font-bold text-green-600">FREE</p>
                        @else
                            <p class="text-2xl font-bold text-gray-800">{{ number_format($package->fee_amount, 0) }}</p>
                            <p class="text-sm text-gray-500">UGX</p>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Application Form --}}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="p-6 border-b border-gray-200 bg-gray-50">
                    <h3 class="font-semibold text-gray-800">
                        <i class="fas fa-user-edit text-green-600 mr-2"></i>
                        Application Form
                    </h3>
                    <p class="text-sm text-gray-500 mt-1">
                        Please fill in all required fields marked with *
                    </p>
                </div>

                <form action="{{ route('public.training.apply.submit', $package) }}" method="POST" class="p-6">
                    @csrf

                    {{-- Personal Information --}}
                    <div class="mb-8">
                        <h4 class="text-sm font-semibold text-gray-700 uppercase tracking-wide mb-4">
                            Personal Information
                        </h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            {{-- Full Name --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Full Name <span class="text-red-500">*</span>
                                </label>
                                <input type="text" 
                                       name="name" 
                                       value="{{ old('name') }}"
                                       required
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
                                       placeholder="Enter your full name">
                                @error('name')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

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

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

                            {{-- Organization --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Organization
                                </label>
                                <input type="text" 
                                       name="organization" 
                                       value="{{ old('organization') }}"
                                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
                                       placeholder="Your organization name">
                            </div>
                        </div>
                    </div>

                    {{-- Position --}}
                    <div class="mb-8">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Position / Job Title
                        </label>
                        <input type="text" 
                               name="position" 
                               value="{{ old('position') }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
                               placeholder="Your position at the organization">
                    </div>

                    {{-- Payment Section --}}
                    @if(!$package->is_free)
                        <div class="mb-8 p-6 bg-yellow-50 border border-yellow-200 rounded-lg">
                            <h4 class="text-sm font-semibold text-yellow-800 uppercase tracking-wide mb-4">
                                <i class="fas fa-credit-card mr-2"></i>
                                Payment Information
                            </h4>
                            <p class="text-sm text-yellow-700 mb-4">
                                This training requires a fee of <strong>{{ $package->getFormattedFee() }}</strong>.
                                Choose your preferred payment method below.
                            </p>
                            <x-payment-method-toggle />
                        </div>
                    @endif

                    {{-- Additional Notes --}}
                    <div class="mb-8">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Additional Notes (Optional)
                        </label>
                        <textarea name="notes" 
                                  rows="3"
                                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
                                  placeholder="Any special requirements or information you'd like us to know...">{{ old('notes') }}</textarea>
                    </div>

                    {{-- Terms & Conditions --}}
                    <div class="mb-8">
                        <label class="flex items-start gap-3 cursor-pointer">
                            <input type="checkbox" 
                                   name="terms" 
                                   required
                                   class="mt-1 w-5 h-5 text-green-600 border-gray-300 rounded focus:ring-green-500">
                            <span class="text-sm text-gray-600">
                                I agree to the <a href="#" class="text-green-600 hover:underline">Terms and Conditions</a> 
                                and confirm that the information provided is accurate. I understand that my registration 
                                is subject to approval.
                            </span>
                        </label>
                    </div>

                    {{-- Submit Buttons --}}
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="{{ route('public.training.show', $package) }}" 
                           class="flex-1 text-center px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
                            <i class="fas fa-arrow-left mr-2"></i>
                            Back to Program
                        </a>
                        <button type="submit" 
                                class="flex-1 px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium">
                            <i class="fas fa-paper-plane mr-2"></i>
                            Submit Application
                        </button>
                    </div>
                </form>
            </div>

            {{-- Info Note --}}
            <div class="mt-6 text-center text-sm text-gray-500">
                <p>
                    <i class="fas fa-info-circle mr-1"></i>
                    After submitting, you will receive a confirmation email with next steps.
                </p>
            </div>
        </div>
    </div>
</section>
@endsection
