@extends('layouts.app')
@section('title', 'Create Exam')
@section('page-title', 'Create New Exam')
@section('content')

<div style="max-width:860px;">
    <form method="POST" action="{{ route('tester.exams.store') }}">
        @csrf

        <div class="card" style="margin-bottom:24px;">
            <div class="card-header"><h5>Basic Information</h5></div>
            <div class="card-body">
                <div class="form-group">
                    <label class="form-label">Exam Title *</label>
                    <input type="text" name="title" class="form-control" value="{{ old('title') }}" required placeholder="e.g. GCSE Mathematics Mock Exam 2024">
                </div>
                <div class="form-group">
                    <label class="form-label">Description</label>
                    <textarea name="description" class="form-control" rows="3" placeholder="Brief overview of this exam...">{{ old('description') }}</textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">Candidate Instructions</label>
                    <textarea name="instructions" class="form-control" rows="4" placeholder="Instructions shown to candidates before they start...">{{ old('instructions') }}</textarea>
                </div>
            </div>
        </div>

        <div class="card" style="margin-bottom:24px;">
            <div class="card-header"><h5>Exam Settings</h5></div>
            <div class="card-body">
                <div class="grid-3">
                    <div class="form-group">
                        <label class="form-label">Duration (minutes) *</label>
                        <input type="number" name="duration_minutes" class="form-control" value="{{ old('duration_minutes', 60) }}" min="1" max="600" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Pass Mark (%) *</label>
                        <input type="number" name="pass_percentage" class="form-control" value="{{ old('pass_percentage', 50) }}" min="0" max="100" step="0.01" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Max Attempts *</label>
                        <input type="number" name="max_attempts" class="form-control" value="{{ old('max_attempts', 1) }}" min="1" max="10" required>
                    </div>
                </div>

                <div class="grid-2">
                    <div class="form-group">
                        <label class="form-label">Start Date & Time</label>
                        <input type="datetime-local" name="start_at" class="form-control" value="{{ old('start_at') }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">End Date & Time</label>
                        <input type="datetime-local" name="end_at" class="form-control" value="{{ old('end_at') }}">
                    </div>
                </div>

                <div class="grid-2">
                    <div class="form-group">
                        <label class="form-label">Access Code (optional)</label>
                        <input type="text" name="access_code" class="form-control" value="{{ old('access_code') }}" placeholder="Leave blank for open registration">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Price Per Candidate ($)</label>
                        <input type="number" name="price_per_candidate" class="form-control" value="{{ old('price_per_candidate', 0) }}" min="0" step="0.01" placeholder="0 = free for candidates">
                    </div>
                </div>

                <div style="display:flex;flex-wrap:wrap;gap:24px;margin-top:8px;">
                    <label class="form-check">
                        <input type="checkbox" name="randomize_questions" value="1" {{ old('randomize_questions') ? 'checked' : '' }}>
                        <span>Randomize question order</span>
                    </label>
                    <label class="form-check">
                        <input type="checkbox" name="show_results_immediately" value="1" {{ old('show_results_immediately', true) ? 'checked' : '' }}>
                        <span>Show results immediately</span>
                    </label>
                    <label class="form-check">
                        <input type="checkbox" name="allow_review" value="1" {{ old('allow_review', true) ? 'checked' : '' }}>
                        <span>Allow answer review</span>
                    </label>
                    <label class="form-check">
                        <input type="checkbox" name="issue_certificate" value="1" {{ old('issue_certificate') ? 'checked' : '' }}>
                        <span>Issue completion certificates</span>
                    </label>
                </div>
            </div>
        </div>

        @if($moodleCourses)
        <div class="card" style="margin-bottom:24px;">
            <div class="card-header">
                <h5>Moodle Integration</h5>
                <span class="badge badge-success"><i class="bi bi-check-circle"></i> Connected</span>
            </div>
            <div class="card-body">
                <div class="grid-2">
                    <div class="form-group">
                        <label class="form-label">Link to Moodle Course</label>
                        <select name="moodle_course_id" class="form-control">
                            <option value="">— None (create standalone exam) —</option>
                            @foreach($moodleCourses as $course)
                            <option value="{{ $course['id'] }}" {{ old('moodle_course_id') == $course['id'] ? 'selected' : '' }}>
                                {{ $course['fullname'] ?? $course['shortname'] ?? 'Course #'.$course['id'] }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group" style="display:flex;align-items:flex-end;">
                        <label class="form-check">
                            <input type="checkbox" name="sync_with_moodle" value="1" {{ old('sync_with_moodle') ? 'checked' : '' }}>
                            <span>Sync grades back to Moodle</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <div class="flex gap-3">
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-arrow-right-circle"></i> Create Exam & Add Questions
            </button>
            <a href="{{ route('tester.exams.index') }}" class="btn btn-outline">Cancel</a>
        </div>
    </form>
</div>
@endsection