<x-app-layout>

<x-module-hero
    title="Register for Training"
    description="Complete the registration form below"
    icon="fa-user-plus">

    <x-slot name="backButton">
        <a href="{{ route('training.registrations.index') }}"
           class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition">
            <i class="fas fa-arrow-left"></i> Back to Registrations
        </a>
    </x-slot>

    <x-slot name="tabs">
        <a href="{{ route('training.registrations.index') }}"
           class="module-hero-tab {{ request()->routeIs('training.registrations.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                  inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                  md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
            <i class="fas fa-users text-sm"></i> All Registrations
        </a>
        <a href="{{ route('training.registrations.pending') }}"
           class="module-hero-tab {{ request()->routeIs('training.registrations.pending') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                  inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                  md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
            <i class="fas fa-clock text-sm"></i> Pending
        </a>
        <a href="{{ route('training.registrations.my') }}"
           class="module-hero-tab {{ request()->routeIs('training.registrations.my') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                  inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                  md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
            <i class="fas fa-user text-sm"></i> My Registrations
        </a>
        <a href="{{ route('training.registrations.create') }}"
           class="module-hero-tab border-b-2 border-[#1e293b]
                  inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                  md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
            <i class="fas fa-plus text-sm"></i> New Registration
        </a>
    </x-slot>

</x-module-hero>

<div class="p-6">

    {{-- Selected Package Info --}}
    @if(isset($package))
        <div class="bg-white rounded-lg shadow-sm border-l-4 border-green-600 border border-gray-200 p-5 mb-6">
            <div class="flex items-center gap-4">
                @if($package->featured_image)
                    <img src="{{ $package->featured_image }}" alt="{{ $package->name }}" class="w-16 h-16 object-cover rounded-lg">
                @else
                    <div class="w-16 h-16 bg-green-100 rounded-lg flex items-center justify-center">
                        <i class="fas fa-book text-green-600 text-xl"></i>
                    </div>
                @endif
                <div class="flex-1">
                    <h3 class="font-semibold text-gray-900">{{ $package->name }}</h3>
                    <div class="text-sm text-gray-500 mt-1">
                        <span class="mr-4"><i class="fas fa-clock mr-1"></i>{{ $package->getFormattedDuration() }}</span>
                        <span><i class="fas fa-users mr-1"></i>{{ $package->capacity }} capacity</span>
                    </div>
                    <div class="mt-1">
                        @if($package->is_free)
                            <span class="text-green-600 font-semibold text-sm">Free Training</span>
                        @else
                            <span class="text-gray-900 font-semibold text-sm">{{ $package->getFormattedFee() }}</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @endif

    <form action="{{ route('training.registrations.store') }}" method="POST">
        @csrf

        @if($errors->any())
            <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center gap-2">
                <i class="fas fa-exclamation-circle"></i> Please fix the errors below.
            </div>
        @endif

        {{-- Package Selection --}}
        @if(!isset($package))
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
                <h3 class="text-base font-semibold text-gray-800 border-b pb-3 mb-4 flex items-center gap-2">
                    <i class="fas fa-box text-green-600"></i> Select Training Package
                </h3>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Training Package <span class="text-red-500">*</span>
                    </label>
                    <select name="training_package_id" required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                        <option value="">Select a training package</option>
                        @foreach($packages as $pkg)
                            <option value="{{ $pkg->id }}" {{ old('training_package_id') == $pkg->id ? 'selected' : '' }}>
                                {{ $pkg->name }} – {{ $pkg->is_free ? 'Free' : $pkg->getFormattedFee() }}
                            </option>
                        @endforeach
                    </select>
                    @error('training_package_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
            </div>
        @else
            <input type="hidden" name="training_package_id" value="{{ $package->id }}">
        @endif

        {{-- Session Selection --}}
        @if(isset($package) && isset($sessions) && $sessions->count() > 0)
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
                <h3 class="text-base font-semibold text-gray-800 border-b pb-3 mb-4 flex items-center gap-2">
                    <i class="fas fa-calendar text-green-600"></i> Select Session
                </h3>
                <div class="space-y-2">
                    @foreach($sessions as $session)
                        <label class="flex items-start gap-3 p-4 border rounded-lg cursor-pointer hover:bg-gray-50 transition {{ old('session_id') == $session->id ? 'border-green-500 bg-green-50' : 'border-gray-200' }}">
                            <input type="radio" name="session_id" value="{{ $session->id }}"
                                   {{ old('session_id') == $session->id ? 'checked' : '' }}
                                   class="mt-1 w-4 h-4 text-green-600 border-gray-300 focus:ring-green-500">
                            <div>
                                <div class="font-medium text-gray-900 text-sm">{{ $session->session_name }}</div>
                                <div class="text-xs text-gray-500 mt-1">
                                    {{ $session->session_date->format('l, F j, Y') }} at {{ \Carbon\Carbon::parse($session->start_time)->format('g:i A') }}
                                </div>
                                <div class="text-xs text-gray-500">
                                    @if($session->session_type === 'online')
                                        <i class="fas fa-video mr-1"></i>Online
                                    @else
                                        <i class="fas fa-map-marker-alt mr-1"></i>{{ $session->venue_name ?? 'TBD' }}
                                    @endif
                                </div>
                            </div>
                        </label>
                    @endforeach
                </div>
                @error('session_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
            </div>
        @endif

        {{-- Participant Information --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <h3 class="text-base font-semibold text-gray-800 border-b pb-3 mb-4 flex items-center gap-2">
                <i class="fas fa-user text-green-600"></i> Participant Information
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Full Name <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="name" value="{{ old('name', auth()->user()->name ?? '') }}" required
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    @error('name')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Email Address <span class="text-red-500">*</span>
                    </label>
                    <input type="email" name="email" value="{{ old('email', auth()->user()->email ?? '') }}" required
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
                    @error('email')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        Phone Number <span class="text-red-500">*</span>
                    </label>
                    <input type="tel" name="phone" value="{{ old('phone') }}" required
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500"
                           placeholder="e.g., 0771234567">
                    @error('phone')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Organization</label>
                    <input type="text" name="organization" value="{{ old('organization') }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500"
                           placeholder="Your organization name">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Position / Title</label>
                    <input type="text" name="position" value="{{ old('position') }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500"
                           placeholder="Your job title">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">ID / Passport Number</label>
                    <input type="text" name="id_number" value="{{ old('id_number') }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500"
                           placeholder="For certificate issuance">
                </div>
            </div>
        </div>

        {{-- Additional Information --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
            <h3 class="text-base font-semibold text-gray-800 border-b pb-3 mb-4 flex items-center gap-2">
                <i class="fas fa-info-circle text-green-600"></i> Additional Information
            </h3>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Special Requirements / Notes</label>
                <textarea name="notes" rows="3"
                          class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500"
                          placeholder="Any dietary requirements, accessibility needs, or other notes...">{{ old('notes') }}</textarea>
            </div>
            <div class="mt-4 flex items-start gap-3">
                <input type="checkbox" name="terms" value="1" {{ old('terms') ? 'checked' : '' }} required
                       class="mt-1 w-4 h-4 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.
                </span>
            </div>
            @error('terms')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
        </div>

        {{-- Actions --}}
        <div class="flex justify-end gap-3">
            <a href="{{ route('training.registrations.index') }}"
               class="px-5 py-2 border border-gray-300 text-gray-700 rounded-lg text-sm hover:bg-gray-50 transition">
                Cancel
            </a>
            <button type="submit"
                    class="px-5 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 transition">
                <i class="fas fa-paper-plane mr-1"></i> Submit Registration
            </button>
        </div>
    </form>
</div>

</x-app-layout>
