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

@section('title', 'Edit: ' . $course->title)
@section('page-title', 'Edit Course')
@section('page-subtitle', $course->title)

@section('hero-actions')
    <a href="{{ route('self-paced.dashboard.courses.show', $course) }}"
       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-eye"></i> View Course
    </a>
    <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
    </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'], ['4', 'Course Settings', 'fa-cog']] 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 < '4')
                <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.update', $course) }}"
          method="POST"
          enctype="multipart/form-data">
        @csrf
        @method('PUT')

        {{-- ================================================================
             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', $course->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', $course->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', $course->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', $course->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', $course->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', $course->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', $course->status) === 'draft'     ? 'selected' : '' }}>Draft</option>
                            <option value="published" {{ old('status', $course->status) === 'published' ? 'selected' : '' }}>Published</option>
                            <option value="archived"  {{ old('status', $course->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">(leave blank to keep current)</span>
                        </label>
                        @if($course->featured_image)
                        <div class="mb-2 flex items-center gap-2">
                            <img src="{{ asset('storage/' . $course->featured_image) }}"
                                 alt="Current image"
                                 class="w-16 h-16 rounded-lg object-cover border border-gray-200">
                            <span class="text-xs text-gray-400">Current image</span>
                        </div>
                        @endif
                        <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', $course->fee_amount) }}"
                               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
                    </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', $course->currency) }}"
                               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', $course->duration_hours) }}"
                               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>

                <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">
                        Changes to the fee apply to new enrollments only. Existing enrollments are not affected.
                    </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', $course->passing_score) }}"
                               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">Applies to future exam attempts only.</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', $course->exam_attempts_allowed) }}"
                               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', $course->exam_time_limit) }}"
                               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', $course->exam_questions_per_attempt) }}"
                               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
                    </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="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: Course Settings <i class="fas fa-arrow-right"></i>
                </button>
            </div>
        </div>

        {{-- ================================================================
             STEP 4 — Course Settings (Payment, Certificate, Book, Timing)
        ================================================================ --}}
        <div x-show="step === 4" 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-cog text-blue-500"></i> Course Settings
                </h2>

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

                    {{-- Payment Mode & Fees --}}
                    <div>
                        <h3 class="text-sm font-semibold text-gray-700 mb-4 flex items-center gap-2">
                            <i class="fas fa-credit-card text-indigo-500"></i> Payment Settings
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                            {{-- Payment Mode --}}
                            <div class="md:col-span-2">
                                <label class="block text-xs font-semibold text-gray-600 mb-2">Payment Mode</label>
                                <div class="space-y-2">
                                    @foreach(['online' => 'Online (Paystack)', 'cash' => 'Cash (Proof Upload)', 'both' => 'Both (Online & Cash)'] as $mode => $label)
                                    <label class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                                        <input type="radio" name="payment_mode" value="{{ $mode }}"
                                            {{ old('payment_mode', $course->payment_mode ?? 'online') === $mode ? 'checked' : '' }}
                                            class="w-4 h-4 accent-indigo-600">
                                        <span class="text-sm text-gray-700">{{ $label }}</span>
                                    </label>
                                    @endforeach
                                </div>
                                @error('payment_mode')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- Registration Fee --}}
                            <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> Registration Fee
                                    <span class="text-gray-400 font-normal">(KES, set 0 for free)</span>
                                </label>
                                <input type="number"
                                       name="registration_fee"
                                       value="{{ old('registration_fee', $course->registration_fee) }}"
                                       min="0"
                                       step="0.01"
                                       placeholder="0"
                                       class="w-full px-3 py-2 text-sm border @error('registration_fee') 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('registration_fee')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- Application Fee --}}
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                                    <i class="fas fa-file-invoice text-gray-400 mr-1"></i> Application Fee
                                    <span class="text-gray-400 font-normal">(KES, set 0 for free)</span>
                                </label>
                                <input type="number"
                                       name="application_fee"
                                       value="{{ old('application_fee', $course->application_fee) }}"
                                       min="0"
                                       step="0.01"
                                       placeholder="0"
                                       class="w-full px-3 py-2 text-sm border @error('application_fee') 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('application_fee')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    {{-- Certificate Settings --}}
                    <div>
                        <h3 class="text-sm font-semibold text-gray-700 mb-4 flex items-center gap-2">
                            <i class="fas fa-certificate text-amber-500"></i> Certificate Settings
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                            {{-- Certificate Fee --}}
                            <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> Certificate Fee
                                    <span class="text-gray-400 font-normal">(KES, set 0 for free)</span>
                                </label>
                                <input type="number"
                                       name="certificate_fee"
                                       value="{{ old('certificate_fee', $course->certificate_fee) }}"
                                       min="0"
                                       step="0.01"
                                       placeholder="0"
                                       class="w-full px-3 py-2 text-sm border @error('certificate_fee') 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('certificate_fee')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- Certificate Collection Mode --}}
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 mb-2">Certificate Collection Mode</label>
                                <div class="space-y-2">
                                    <label class="flex items-center gap-3 p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                                        <input type="radio" name="certificate_collection_mode" value="self_download"
                                            {{ old('certificate_collection_mode', $course->certificate_collection_mode ?? 'self_download') === 'self_download' ? 'checked' : '' }}
                                            class="w-4 h-4 accent-indigo-600">
                                        <span class="text-sm text-gray-700">Self-Download</span>
                                    </label>
                                    <label class="flex items-center gap-3 p-2 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                                        <input type="radio" name="certificate_collection_mode" value="hardcopy"
                                            {{ old('certificate_collection_mode', $course->certificate_collection_mode ?? 'self_download') === 'hardcopy' ? 'checked' : '' }}
                                            class="w-4 h-4 accent-indigo-600">
                                        <span class="text-sm text-gray-700">Hardcopy (Collect from Institution)</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Book Settings --}}
                    <div>
                        <h3 class="text-sm font-semibold text-gray-700 mb-4 flex items-center gap-2">
                            <i class="fas fa-book text-green-500"></i> Course Book
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                            {{-- Book Fee --}}
                            <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> Book Fee
                                    <span class="text-gray-400 font-normal">(KES, set 0 for free)</span>
                                </label>
                                <input type="number"
                                       name="book_fee"
                                       value="{{ old('book_fee', $course->book_fee) }}"
                                       min="0"
                                       step="0.01"
                                       placeholder="0"
                                       class="w-full px-3 py-2 text-sm border @error('book_fee') 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('book_fee')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- Book Upload --}}
                            <div>
                                <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                                    <i class="fas fa-file-pdf text-gray-400 mr-1"></i> Course Book PDF
                                    @if($course->book_file_name)
                                        <span class="text-green-600 font-normal">(Current: {{ $course->book_file_name }})</span>
                                    @endif
                                </label>
                                <input type="file"
                                       name="book"
                                       accept=".pdf"
                                       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-green-50 file:text-green-700 hover:file:bg-green-100 transition">
                                <p class="text-gray-400 text-xs mt-1">PDF only, max 50 MB</p>
                                @error('book')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    {{-- Exam Re-sit Settings --}}
                    <div>
                        <h3 class="text-sm font-semibold text-gray-700 mb-4 flex items-center gap-2">
                            <i class="fas fa-redo text-purple-500"></i> Exam Re-sit Settings
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                            {{-- Exam Failure Fee --}}
                            <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> Re-sit Fee
                                    <span class="text-gray-400 font-normal">(KES, set 0 for free)</span>
                                </label>
                                <input type="number"
                                       name="exam_failure_fee"
                                       value="{{ old('exam_failure_fee', $course->exam_failure_fee) }}"
                                       min="0"
                                       step="0.01"
                                       placeholder="0"
                                       class="w-full px-3 py-2 text-sm border @error('exam_failure_fee') 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_failure_fee')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            {{-- Max Exam Attempts (read-only) --}}
                            <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
                                    <span class="text-gray-400 font-normal">(fixed at 3)</span>
                                </label>
                                <input type="text"
                                       value="3"
                                       disabled
                                       class="w-full px-3 py-2 text-sm border border-gray-200 bg-gray-50 rounded-lg text-gray-500 cursor-not-allowed">
                            </div>
                        </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-save"></i> Save Changes
                </button>
            </div>
        </div>

    </form>
</div>
@endsection

@push('scripts')
<script>
function courseForm() {
    return {
        step: 1,
        nextStep() { if (this.step < 4) this.step++; },
        prevStep() { if (this.step > 1) this.step--; },
        goToStep(n) { if (n <= this.step) this.step = n; },
    };
}
</script>
@endpush
