@extends('layouts.app')

@section('title', 'Create New Course - Teacher Dashboard')

@section('content')
<!-- Page Header -->
<section class="bg-edunetra-dark text-white py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h1 class="display-4 fw-bold mb-3">Create New Course</h1>
                <p class="fs-5 text-light opacity-90">Set up your course details and start building your curriculum</p>
            </div>
            <div class="col-lg-4 text-lg-end">
                <a href="{{ route('teacher.courses.index') }}" class="btn btn-outline-light">
                    <i class="bi bi-arrow-left me-2"></i>Back to Courses
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Form Content -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <form action="{{ route('teacher.courses.store') }}" method="POST">
                            @csrf
                            
                            <!-- Basic Information -->
                            <div class="mb-4">
                                <h3 class="h5 fw-bold text-edunetra-dark mb-3">
                                    <i class="bi bi-info-circle me-2"></i>Basic Information
                                </h3>
                                
                                <div class="mb-3">
                                    <label for="title" class="form-label fw-semibold">Course Title *</label>
                                    <input type="text" class="form-control @error('title') is-invalid @enderror" 
                                           id="title" name="title" value="{{ old('title') }}" required>
                                    @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="description" class="form-label fw-semibold">Course Description *</label>
                                    <textarea class="form-control @error('description') is-invalid @enderror" 
                                              id="description" name="description" rows="4" required>{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="level" class="form-label fw-semibold">Course Level *</label>
                                        <select class="form-select @error('level') is-invalid @enderror" id="level" name="level" required>
                                            <option value="">Select Level</option>
                                            <option value="beginner" {{ old('level') === 'beginner' ? 'selected' : '' }}>Beginner</option>
                                            <option value="intermediate" {{ old('level') === 'intermediate' ? 'selected' : '' }}>Intermediate</option>
                                            <option value="advanced" {{ old('level') === 'advanced' ? 'selected' : '' }}>Advanced</option>
                                        </select>
                                        @error('level')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="duration_weeks" class="form-label fw-semibold">Duration (weeks) *</label>
                                        <input type="number" class="form-control @error('duration_weeks') is-invalid @enderror" 
                                               id="duration_weeks" name="duration_weeks" value="{{ old('duration_weeks', 8) }}" 
                                               min="1" max="52" required>
                                        @error('duration_weeks')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Course Settings -->
                            <div class="mb-4">
                                <h3 class="h5 fw-bold text-edunetra-dark mb-3">
                                    <i class="bi bi-gear me-2"></i>Course Settings
                                </h3>
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="price" class="form-label fw-semibold">Price (Rp) *</label>
                                        <input type="number" class="form-control @error('price') is-invalid @enderror" 
                                               id="price" name="price" value="{{ old('price', 0) }}" 
                                               min="0" step="1000" required>
                                        <div class="form-text">Set to 0 for free course</div>
                                        @error('price')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="max_students" class="form-label fw-semibold">Max Students</label>
                                        <input type="number" class="form-control @error('max_students') is-invalid @enderror" 
                                               id="max_students" name="max_students" value="{{ old('max_students') }}" 
                                               min="1" placeholder="Leave empty for unlimited">
                                        @error('max_students')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="start_date" class="form-label fw-semibold">Start Date</label>
                                        <input type="date" class="form-control @error('start_date') is-invalid @enderror" 
                                               id="start_date" name="start_date" value="{{ old('start_date') }}">
                                        @error('start_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="end_date" class="form-label fw-semibold">End Date</label>
                                        <input type="date" class="form-control @error('end_date') is-invalid @enderror" 
                                               id="end_date" name="end_date" value="{{ old('end_date') }}">
                                        @error('end_date')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Additional Information -->
                            <div class="mb-4">
                                <h3 class="h5 fw-bold text-edunetra-dark mb-3">
                                    <i class="bi bi-plus-circle me-2"></i>Additional Information
                                </h3>
                                
                                <div class="mb-3">
                                    <label for="tags" class="form-label fw-semibold">Tags</label>
                                    <input type="text" class="form-control @error('tags') is-invalid @enderror" 
                                           id="tags" name="tags" value="{{ old('tags') }}" 
                                           placeholder="e.g., English, Young Learner, Visual Impairment">
                                    <div class="form-text">Separate tags with commas</div>
                                    @error('tags')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="image" class="form-label fw-semibold">Course Image URL</label>
                                    <input type="url" class="form-control @error('image') is-invalid @enderror" 
                                           id="image" name="image" value="{{ old('image') }}" 
                                           placeholder="https://example.com/image.jpg">
                                    @error('image')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Submit Buttons -->
                            <div class="d-flex gap-2">
                                <button type="submit" class="btn btn-edunetra">
                                    <i class="bi bi-check-circle me-2"></i>Create Course
                                </button>
                                <a href="{{ route('teacher.courses.index') }}" class="btn btn-outline-secondary">
                                    Cancel
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection