@extends('layouts.self-paced-dashboard')

@section('title', 'Manual Enrollment')
@section('page-title', 'Manual Enrollment')
@section('page-subtitle', 'Enroll a trainee directly — bypasses payment and sets status to active')

@section('hero-actions')
    <a href="{{ route('self-paced.dashboard.enrollments.index') }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
        <i class="fas fa-arrow-left"></i> Back to Enrollments
    </a>
@endsection

@section('content')
<div class="max-w-5xl mx-auto">

    {{-- Validation Errors --}}
    @if($errors->any())
    <div class="bg-red-50 border border-red-200 rounded-xl p-4 mb-5">
        <div class="flex items-start gap-3">
            <i class="fas fa-exclamation-circle text-red-500 mt-0.5"></i>
            <div>
                <p class="text-sm font-semibold text-red-700 mb-1">Please fix the following errors:</p>
                <ul class="text-sm text-red-600 space-y-0.5 list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    @endif

    {{-- Info Banner --}}
    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-5 flex items-start gap-3">
        <i class="fas fa-triangle-exclamation text-amber-500 mt-0.5 flex-shrink-0"></i>
        <div>
            <p class="text-sm font-semibold text-amber-800">Manual Enrollment</p>
            <p class="text-sm text-amber-700 mt-0.5">
                This creates an enrollment with status <strong>Active</strong> immediately, bypassing the payment process.
                Use this for admin overrides, free access grants, or offline payment confirmations.
            </p>
        </div>
    </div>

    {{-- Form Card --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h2 class="text-base font-semibold text-gray-800 mb-5 flex items-center gap-2">
            <i class="fas fa-user-plus text-indigo-500"></i> Enrollment Details
        </h2>

        <form action="{{ route('self-paced.dashboard.enrollments.store') }}"
              method="POST"
              id="enrollment-form">
            @csrf

            <div class="space-y-5">

                {{-- User --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-user text-gray-400 mr-1"></i> Trainee <span class="text-red-500">*</span>
                    </label>
                    <select name="user_id"
                            id="user_id"
                            class="w-full px-3 py-2 text-sm border @error('user_id') border-red-400 bg-red-50 @else border-gray-200 @enderror rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition bg-white">
                        <option value="">— Select Trainee —</option>
                        @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                {{ $user->name }} ({{ $user->email }})
                            </option>
                        @endforeach
                    </select>
                    @error('user_id')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                    <p class="text-gray-400 text-xs mt-1">Select the user to enroll. All registered users are listed.</p>
                </div>

                {{-- Course --}}
                <div x-data="{ selectedFee: '' }">
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-book text-gray-400 mr-1"></i> Course <span class="text-red-500">*</span>
                    </label>
                    <select name="course_id"
                            id="course_id"
                            @change="selectedFee = $event.target.options[$event.target.selectedIndex].dataset.fee"
                            class="w-full px-3 py-2 text-sm border @error('course_id') border-red-400 bg-red-50 @else border-gray-200 @enderror rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition bg-white">
                        <option value="">— Select Course —</option>
                        @foreach($courses as $course)
                            <option value="{{ $course->id }}"
                                    data-fee="{{ $course->fee_amount }}"
                                    {{ old('course_id') == $course->id ? 'selected' : '' }}>
                                {{ $course->title }}
                                @if($course->fee_amount > 0)
                                    — {{ $course->currency }} {{ number_format($course->fee_amount) }}
                                @else
                                    — Free
                                @endif
                            </option>
                        @endforeach
                    </select>
                    @error('course_id')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror

                    {{-- Fee notice --}}
                    <div x-show="selectedFee !== '' && selectedFee > 0" x-cloak
                         class="mt-2 p-3 bg-blue-50 border border-blue-100 rounded-lg flex items-start gap-2">
                        <i class="fas fa-info-circle text-blue-400 mt-0.5 flex-shrink-0"></i>
                        <p class="text-xs text-blue-700">
                            This is a paid course. Manual enrollment will activate access without collecting payment.
                            Ensure payment has been confirmed through another channel before proceeding.
                        </p>
                    </div>
                    <div x-show="selectedFee === '0' || selectedFee === '0.00'" x-cloak
                         class="mt-2 p-3 bg-green-50 border border-green-100 rounded-lg flex items-start gap-2">
                        <i class="fas fa-gift text-green-400 mt-0.5 flex-shrink-0"></i>
                        <p class="text-xs text-green-700">This is a free course. Enrollment will be activated immediately.</p>
                    </div>
                </div>

            </div>

            {{-- Submit --}}
            <div class="flex items-center justify-between mt-6 pt-5 border-t border-gray-100">
                <a href="{{ route('self-paced.dashboard.enrollments.index') }}"
                   class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
                    <i class="fas fa-times"></i> Cancel
                </a>
                <button type="submit"
                        class="inline-flex items-center gap-2 px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition shadow">
                    <i class="fas fa-user-plus"></i> Enroll Trainee
                </button>
            </div>

        </form>
    </div>

</div>
@endsection
