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

@section('title', 'Add Topic — ' . $course->title)
@section('page-title', 'Add Topic')
@section('page-subtitle', $course->title)

@section('hero-actions')
    <a href="{{ route('self-paced.dashboard.courses.topics.index', $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-arrow-left"></i> Back to Topics
    </a>
@endsection

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

    {{-- Breadcrumb --}}
    <nav class="flex items-center gap-2 text-xs text-gray-400 mb-4">
        <a href="{{ route('self-paced.dashboard.index') }}" class="hover:text-indigo-600 transition">Dashboard</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <a href="{{ route('self-paced.dashboard.courses.index') }}" class="hover:text-indigo-600 transition">Courses</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <a href="{{ route('self-paced.dashboard.courses.show', $course) }}" class="hover:text-indigo-600 transition">{{ Str::limit($course->title, 40) }}</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <a href="{{ route('self-paced.dashboard.courses.topics.index', $course) }}" class="hover:text-indigo-600 transition">Topics</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <span class="text-gray-600 font-medium">Add Topic</span>
    </nav>

    {{-- 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

    <form action="{{ route('self-paced.dashboard.courses.topics.store', $course) }}"
          method="POST">
        @csrf

        <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-list-ul text-teal-500"></i> Topic Details
            </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-heading text-gray-400 mr-1"></i> Topic Title <span class="text-red-500">*</span>
                    </label>
                    <input type="text"
                           name="title"
                           value="{{ old('title') }}"
                           placeholder="e.g. Introduction to the Subject"
                           autofocus
                           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-gray-400 font-normal">(optional)</span>
                    </label>
                    <textarea name="description"
                              rows="3"
                              placeholder="Brief overview of what this topic covers…"
                              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('description') }}</textarea>
                </div>

                {{-- Sort Order --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-sort-numeric-up text-gray-400 mr-1"></i> Sort Order
                        <span class="text-gray-400 font-normal">(optional)</span>
                    </label>
                    <input type="number"
                           name="sort_order"
                           value="{{ old('sort_order') }}"
                           min="0"
                           placeholder="Auto-assigned if blank"
                           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">
                    <p class="text-gray-400 text-xs mt-1">Lower numbers appear first. Leave blank to append at end.</p>
                </div>

                {{-- Published --}}
                <div class="flex items-center">
                    <label class="flex items-center gap-3 cursor-pointer">
                        <div class="relative">
                            <input type="hidden" name="is_published" value="0">
                            <input type="checkbox"
                                   name="is_published"
                                   value="1"
                                   {{ old('is_published', '1') == '1' ? 'checked' : '' }}
                                   class="sr-only peer">
                            <div class="w-10 h-5 bg-gray-200 peer-checked:bg-indigo-600 rounded-full transition peer-focus:ring-2 peer-focus:ring-indigo-300"></div>
                            <div class="absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow transition peer-checked:translate-x-5"></div>
                        </div>
                        <div>
                            <p class="text-xs font-semibold text-gray-600">
                                <i class="fas fa-toggle-on text-gray-400 mr-1"></i> Published
                            </p>
                            <p class="text-xs text-gray-400">Visible to enrolled learners</p>
                        </div>
                    </label>
                </div>

            </div>
        </div>

        {{-- Timing Section --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mt-5">
            <h2 class="text-base font-semibold text-gray-800 mb-5 flex items-center gap-2">
                <i class="fas fa-clock text-orange-500"></i> Timing Requirements
            </h2>

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

                {{-- Minimum Time --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-hourglass-start text-gray-400 mr-1"></i> Minimum Time
                        <span class="text-gray-400 font-normal">(minutes, optional)</span>
                    </label>
                    <input type="number"
                           name="min_time_minutes"
                           value="{{ old('min_time_minutes', $course->topics()->first()?->min_time_seconds ? intval($course->topics()->first()->min_time_seconds / 60) : '') }}"
                           min="0"
                           placeholder="e.g. 15"
                           class="w-full px-3 py-2 text-sm border @error('min_time_minutes') 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">
                    <p class="text-gray-400 text-xs mt-1">Learner must spend at least this many minutes on this topic before marking complete.</p>
                    @error('min_time_minutes')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Maximum Time --}}
                <div>
                    <label class="block text-xs font-semibold text-gray-600 mb-1.5">
                        <i class="fas fa-hourglass-end text-gray-400 mr-1"></i> Maximum Time
                        <span class="text-gray-400 font-normal">(minutes, optional)</span>
                    </label>
                    <input type="number"
                           name="max_time_minutes"
                           value="{{ old('max_time_minutes', $course->topics()->first()?->max_time_seconds ? intval($course->topics()->first()->max_time_seconds / 60) : '') }}"
                           min="0"
                           placeholder="e.g. 30"
                           class="w-full px-3 py-2 text-sm border @error('max_time_minutes') 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">
                    <p class="text-gray-400 text-xs mt-1">Informational only. Maximum recommended time for this topic.</p>
                    @error('max_time_minutes')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            {{-- Validation Hint --}}
            <div class="mt-4 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">
                    <strong>Tip:</strong> Maximum time must be greater than or equal to minimum time. Set both to 0 to disable timing requirements.
                </p>
            </div>
        </div>
            <a href="{{ route('self-paced.dashboard.courses.topics.index', $course) }}"
               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-times"></i> Cancel
            </a>
            <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 Topic
            </button>
        </div>

    </form>
</div>
@endsection
