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

@section('title', 'Create Course')
@section('page-title', 'Create New Course')
@section('page-subtitle', 'Fill in the details below to create a new self-paced course')

@section('hero-actions')
    <a href="{{ route('self-paced.dashboard.courses.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 Courses
    </a>
@endsection

@section('content')
<div x-data="courseForm()" class="max-w-4xl 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

    {{-- Step Indicator --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-5">
        <div class="flex items-center gap-2">
            @foreach([['1', 'Basic Info', 'fa-book'], ['2', 'Fees & Duration', 'fa-money-bill'], ['3', 'Exam Settings', 'fa-clipboard-question']] as [$num, $label, $icon])
            <div class="flex items-center gap-2 flex-1">
                <button type="button"
                        @click="goToStep({{ $num }})"
                        :class="step >= {{ $num }} ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-400'"
                        class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition flex-shrink-0">
                    <template x-if="step > {{ $num }}">
                        <i class="fas fa-check text-xs"></i>
                    </template>
                    <template x-if="step <= {{ $num }}">
                        <span>{{ $num }}</span>
                    </template>
                </button>
                <div class="hidden sm:block">
                    <p :class="step >= {{ $num }} ? 'text-indigo-700' : 'text-gray-400'"
                       class="text-xs font-semibold transition">{{ $label }}</p>
                </div>
                @if($num < '3')
                <div class="flex-1 h-0.5 mx-2"
                     :class="step > {{ $num }} ? 'bg-indigo-300' : 'bg-gray-200'"></div>
                @endif
            </div>
            @endforeach
        </div>
    </div>

    {{-- Form --}}
    <form action="{{ route('self-paced.dashboard.courses.store') }}"
          method="POST"
          enctype="multipart/form-data"
          id="course-form">
        @csrf

        {{-- ================================================================
             STEP 1 — Basic Info
        ================================================================ --}}
        <div x-show="step === 1" x-cloak>
            <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-book text-indigo-500"></i> Basic Information
                </h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                    {{-- Title --}}
                    <div class="md:col-span-2">
                        <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 Title <span class="text-red-500">*</span>
                        </label>
                        <input type="text"
                               name="title"
                               value="{{ old('title') }}"
                               placeholder="e.g. Introduction to Public Health"
                               class="w-full px-3 py-2 text-sm border @error('title') 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">
                        @error('title')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Description --}}
                    <div class="md:col-span-2">
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                            <i class="fas fa-align-left text-gray-400 mr-1"></i> Description <span class="text-red-500">*</span>
                        </label>
                        <textarea name="description"
                                  rows="4"
                                  placeholder="Provide a clear overview of what this course covers…"
                                  class="w-full px-3 py-2 text-sm border @error('description') 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 resize-none">{{ old('description') }}</textarea>
                        @error('description')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Objectives --}}
                    <div class="md:col-span-2">
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                            <i class="fas fa-bullseye text-gray-400 mr-1"></i> Learning Objectives
                            <span class="text-gray-400 font-normal">(optional)</span>
                        </label>
                        <textarea name="objectives"
                                  rows="3"
                                  placeholder="List what learners will be able to do after completing this course…"
                                  class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition resize-none">{{ old('objectives') }}</textarea>
                    </div>

                    {{-- Prerequisites --}}
                    <div class="md:col-span-2">
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                            <i class="fas fa-list-check text-gray-400 mr-1"></i> Prerequisites
                            <span class="text-gray-400 font-normal">(optional)</span>
                        </label>
                        <textarea name="prerequisites"
                                  rows="2"
                                  placeholder="Any prior knowledge or requirements learners should have…"
                                  class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition resize-none">{{ old('prerequisites') }}</textarea>
                    </div>

                    {{-- Category --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                            <i class="fas fa-tag text-gray-400 mr-1"></i> Category
                        </label>
                        <select name="category_id"
                                class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition bg-white">
                            <option value="">— Select Category —</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>
                                    {{ $cat->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Instructor --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                            <i class="fas fa-user-tie text-gray-400 mr-1"></i> Instructor
                        </label>
                        <select name="instructor_id"
                                class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition bg-white">
                            <option value="">— Select Instructor —</option>
                            @foreach($instructors as $instructor)
                                <option value="{{ $instructor->id }}" {{ old('instructor_id') == $instructor->id ? 'selected' : '' }}>
                                    {{ $instructor->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Status --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                            <i class="fas fa-toggle-on text-gray-400 mr-1"></i> Status
                        </label>
                        <select name="status"
                                class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition bg-white">
                            <option value="draft"     {{ old('status', 'draft') === 'draft'     ? 'selected' : '' }}>Draft</option>
                            <option value="published" {{ old('status') === 'published' ? 'selected' : '' }}>Published</option>
                            <option value="archived"  {{ old('status') === 'archived'  ? 'selected' : '' }}>Archived</option>
                        </select>
                    </div>

                    {{-- Featured Image --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                            <i class="fas fa-image text-gray-400 mr-1"></i> Featured Image
                            <span class="text-gray-400 font-normal">(optional, max 2MB)</span>
                        </label>
                        <input type="file"
                               name="featured_image"
                               accept="image/*"
                               class="w-full text-sm text-gray-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 transition">
                        @error('featured_image')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                </div>
            </div>

            <div class="flex justify-end mt-4">
                <button type="button"
                        @click="nextStep()"
                        class="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition shadow">
                    Next: Fees & Duration <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        </div>

        {{-- ================================================================
             STEP 2 — Fees & Duration
        ================================================================ --}}
        <div x-show="step === 2" x-cloak>
            <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-money-bill text-green-500"></i> Fees & Duration
                </h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                    {{-- Fee Amount --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                            <i class="fas fa-money-bill text-gray-400 mr-1"></i> Course Fee
                            <span class="text-gray-400 font-normal">(set 0 for free)</span>
                        </label>
                        <input type="number"
                               name="fee_amount"
                               value="{{ old('fee_amount', 0) }}"
                               min="0"
                               step="0.01"
                               placeholder="0"
                               class="w-full px-3 py-2 text-sm border @error('fee_amount') 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">
                        @error('fee_amount')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                        <p class="text-gray-400 text-xs mt-1">A fee of 0 makes the course free — no payment required.</p>
                    </div>

                    {{-- Currency --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                            <i class="fas fa-coins text-gray-400 mr-1"></i> Currency
                        </label>
                        <input type="text"
                               name="currency"
                               value="{{ old('currency', 'UGX') }}"
                               maxlength="10"
                               placeholder="UGX"
                               class="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition">
                    </div>

                    {{-- Duration --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                            <i class="fas fa-clock text-gray-400 mr-1"></i> Estimated Duration (hours)
                        </label>
                        <input type="number"
                               name="duration_hours"
                               value="{{ old('duration_hours', 0) }}"
                               min="0"
                               placeholder="e.g. 10"
                               class="w-full px-3 py-2 text-sm border @error('duration_hours') 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">
                        @error('duration_hours')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                </div>

                {{-- Info note --}}
                <div class="mt-5 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">
                        The fee and duration are displayed on the public landing page course card.
                        Learners will see the fee before registering.
                    </p>
                </div>
            </div>

            <div class="flex justify-between mt-4">
                <button type="button"
                        @click="prevStep()"
                        class="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-lg transition">
                    <i class="fas fa-arrow-left"></i> Back
                </button>
                <button type="button"
                        @click="nextStep()"
                        class="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition shadow">
                    Next: Exam Settings <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        </div>

        {{-- ================================================================
             STEP 3 — Exam Settings
        ================================================================ --}}
        <div x-show="step === 3" x-cloak>
            <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-clipboard-question text-purple-500"></i> Exam Settings
                </h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                    {{-- Passing Score --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                            <i class="fas fa-percent text-gray-400 mr-1"></i> Passing Score (%)
                        </label>
                        <input type="number"
                               name="passing_score"
                               value="{{ old('passing_score', 70) }}"
                               min="1"
                               max="100"
                               placeholder="70"
                               class="w-full px-3 py-2 text-sm border @error('passing_score') 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">
                        @error('passing_score')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                        <p class="text-gray-400 text-xs mt-1">Minimum percentage required to pass and earn a certificate.</p>
                    </div>

                    {{-- Exam Attempts Allowed --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                            <i class="fas fa-redo text-gray-400 mr-1"></i> Max Exam Attempts
                        </label>
                        <input type="number"
                               name="exam_attempts_allowed"
                               value="{{ old('exam_attempts_allowed', 3) }}"
                               min="1"
                               placeholder="3"
                               class="w-full px-3 py-2 text-sm border @error('exam_attempts_allowed') 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">
                        @error('exam_attempts_allowed')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Exam Time Limit --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                            <i class="fas fa-stopwatch text-gray-400 mr-1"></i> Exam Time Limit (minutes)
                        </label>
                        <input type="number"
                               name="exam_time_limit"
                               value="{{ old('exam_time_limit', 60) }}"
                               min="1"
                               placeholder="60"
                               class="w-full px-3 py-2 text-sm border @error('exam_time_limit') 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">
                        @error('exam_time_limit')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Questions Per Attempt --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                            <i class="fas fa-question-circle text-gray-400 mr-1"></i> Questions Per Attempt
                        </label>
                        <input type="number"
                               name="exam_questions_per_attempt"
                               value="{{ old('exam_questions_per_attempt', 10) }}"
                               min="1"
                               placeholder="10"
                               class="w-full px-3 py-2 text-sm border @error('exam_questions_per_attempt') 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">
                        @error('exam_questions_per_attempt')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                        <p class="text-gray-400 text-xs mt-1">Randomly selected from the question bank each attempt.</p>
                    </div>

                </div>

                {{-- Summary preview --}}
                <div class="mt-5 p-4 bg-indigo-50 border border-indigo-100 rounded-xl">
                    <p class="text-xs font-semibold text-indigo-700 mb-2 flex items-center gap-1.5">
                        <i class="fas fa-eye"></i> Exam Summary Preview
                    </p>
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-center">
                        <div class="bg-white rounded-lg p-2">
                            <p class="text-xs text-gray-400">Pass Score</p>
                            <p class="text-sm font-bold text-indigo-700">
                                <span id="preview-passing">{{ old('passing_score', 70) }}</span>%
                            </p>
                        </div>
                        <div class="bg-white rounded-lg p-2">
                            <p class="text-xs text-gray-400">Max Attempts</p>
                            <p class="text-sm font-bold text-indigo-700" id="preview-attempts">{{ old('exam_attempts_allowed', 3) }}</p>
                        </div>
                        <div class="bg-white rounded-lg p-2">
                            <p class="text-xs text-gray-400">Time Limit</p>
                            <p class="text-sm font-bold text-indigo-700">
                                <span id="preview-time">{{ old('exam_time_limit', 60) }}</span> min
                            </p>
                        </div>
                        <div class="bg-white rounded-lg p-2">
                            <p class="text-xs text-gray-400">Questions</p>
                            <p class="text-sm font-bold text-indigo-700" id="preview-questions">{{ old('exam_questions_per_attempt', 10) }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex justify-between mt-4">
                <button type="button"
                        @click="prevStep()"
                        class="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-lg transition">
                    <i class="fas fa-arrow-left"></i> Back
                </button>
                <button type="submit"
                        class="inline-flex items-center gap-2 px-6 py-2.5 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold rounded-lg transition shadow">
                    <i class="fas fa-check"></i> Create Course
                </button>
            </div>
        </div>

    </form>
</div>
@endsection

@push('scripts')
<script>
function courseForm() {
    return {
        step: {{ $errors->any() ? 1 : 1 }},

        init() {
            // If there are validation errors, stay on step 1
            // Live preview updates
            ['passing_score', 'exam_attempts_allowed', 'exam_time_limit', 'exam_questions_per_attempt'].forEach(field => {
                const el = document.querySelector(`[name="${field}"]`);
                const previewMap = {
                    passing_score: 'preview-passing',
                    exam_attempts_allowed: 'preview-attempts',
                    exam_time_limit: 'preview-time',
                    exam_questions_per_attempt: 'preview-questions',
                };
                if (el && previewMap[field]) {
                    el.addEventListener('input', () => {
                        const preview = document.getElementById(previewMap[field]);
                        if (preview) preview.textContent = el.value || '—';
                    });
                }
            });
        },

        nextStep() {
            if (this.step < 3) this.step++;
        },

        prevStep() {
            if (this.step > 1) this.step--;
        },

        goToStep(n) {
            if (n <= this.step) this.step = n;
        },
    };
}
</script>
@endpush
