@extends('layouts.app')
@section('title','New Assessment')
@section('page-title','Assessments')

@push('styles')
<style>
.source-card { border:2px solid var(--card-border);border-radius:12px;padding:1.2rem;cursor:pointer;transition:all .15s; }
.source-card:hover,.source-card.selected { border-color:var(--ul-primary);background:var(--body-bg); }
.source-card.selected { border-color:var(--ul-primary); }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1>New Assessment Test</h1>
        <nav aria-label="breadcrumb"><ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('assessments.index') }}">Assessments</a></li>
            <li class="breadcrumb-item active">Create</li>
        </ol></nav>
    </div>
</div>

<form method="POST" action="{{ route('assessments.store') }}" id="testForm">
    @csrf
    <div class="row g-4">
        <div class="col-12 col-lg-8">

            {{-- Source selection --}}
            <div class="card mb-4">
                <div class="card-header"><i class="bi bi-hdd-stack me-2"></i>Test Platform</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12 col-sm-6" onclick="selectSource('native')">
                            <div class="source-card {{ old('source','native')==='native'?'selected':'' }}" id="card-native">
                                <div class="fw-bold mb-1"><i class="bi bi-pencil-square me-2 text-primary"></i>Native (Built-in)</div>
                                <div style="font-size:.82rem;color:var(--text-2);">Create questions directly in Synergy HRM. Candidates/employees take the test via a secure link — no separate login needed.</div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6" onclick="selectSource('moodle')">
                            <div class="source-card {{ old('source')==='moodle'?'selected':'' }}" id="card-moodle">
                                <div class="fw-bold mb-1">
                                    <i class="bi bi-mortarboard me-2 text-warning"></i>Moodle LMS
                                    @if(!$moodle->isEnabled())
                                    <span class="badge bg-danger ms-1" style="font-size:.65rem;">Not configured</span>
                                    @else
                                    <span class="badge bg-success ms-1" style="font-size:.65rem;">Connected</span>
                                    @endif
                                </div>
                                <div style="font-size:.82rem;color:var(--text-2);">Link to an existing quiz on your Moodle LMS. Synergy sends invitations and retrieves scores automatically.</div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="source" id="sourceInput" value="{{ old('source','native') }}">
                </div>
            </div>

            {{-- Common details --}}
            <div class="card mb-4">
                <div class="card-header"><i class="bi bi-info-circle me-2"></i>Test Details</div>
                <div class="card-body row g-3">
                    <div class="col-12">
                        <label class="form-label">Test Title *</label>
                        <input type="text" name="title" class="form-control" required value="{{ old('title') }}" placeholder="e.g. Software Engineering Aptitude Test">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="2" placeholder="What does this test assess?">{{ old('description') }}</textarea>
                    </div>
                    <div class="col-6 col-md-4">
                        <label class="form-label">Test Type *</label>
                        <select name="type" class="form-select" required onchange="onTypeChange(this.value)">
                            <option value="recruitment" {{ old('type','recruitment')==='recruitment'?'selected':'' }}>Job Placement Test</option>
                            <option value="upskilling"  {{ old('type')==='upskilling'?'selected':'' }}>Upskilling / Career Test</option>
                            <option value="general"     {{ old('type')==='general'?'selected':'' }}>General</option>
                        </select>
                    </div>
                    <div class="col-6 col-md-4">
                        <label class="form-label">Pass Mark (%) *</label>
                        <input type="number" name="pass_score" class="form-control" required min="0" max="100" step="0.1" value="{{ old('pass_score',60) }}">
                    </div>
                    <div class="col-6 col-md-4" id="timeLimitField">
                        <label class="form-label">Time Limit (minutes)</label>
                        <input type="number" name="time_limit_minutes" class="form-control" min="1" max="480" value="{{ old('time_limit_minutes') }}" placeholder="Leave blank for no limit">
                    </div>
                </div>
            </div>

            {{-- Moodle quiz selector --}}
            <div class="card mb-4" id="moodleSection" style="{{ old('source')==='moodle' ? '' : 'display:none;' }}">
                <div class="card-header"><i class="bi bi-mortarboard me-2"></i>Moodle Quiz</div>
                <div class="card-body row g-3">
                    @if($moodleQuizzes->isEmpty())
                    <div class="col-12">
                        <div class="alert alert-warning">
                            <i class="bi bi-exclamation-triangle me-2"></i>No quizzes found.
                            @if($moodle->isEnabled())
                            <a href="{{ route('moodle.sync') }}" class="alert-link">Sync from Moodle</a> to load available quizzes.
                            @else
                            <a href="{{ route('moodle.config') }}" class="alert-link">Configure Moodle</a> first.
                            @endif
                        </div>
                    </div>
                    @else
                    <div class="col-12">
                        <label class="form-label">Select Moodle Quiz *</label>
                        <select name="moodle_quiz_id" class="form-select" id="moodleQuizSelect" onchange="updateQuizUrl()">
                            <option value="">— Select a quiz —</option>
                            @foreach($moodleQuizzes as $q)
                            <option value="{{ $q->moodle_id }}"
                                    data-url="{{ $moodle->isEnabled() ? $moodle->quizUrl($q->moodle_id) : '' }}"
                                    {{ old('moodle_quiz_id')==$q->moodle_id?'selected':'' }}>
                                {{ $q->name }}
                                @if($q->time_limit) ({{ $q->time_limit_label }}) @endif
                            </option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                    <div class="col-12">
                        <label class="form-label">Direct Quiz URL</label>
                        <input type="url" name="moodle_invite_url" id="moodleQuizUrl" class="form-control"
                               value="{{ old('moodle_invite_url') }}" placeholder="Auto-filled when quiz is selected">
                        <div class="form-text">Included in invitation emails. Auto-populated from the quiz selection above.</div>
                    </div>
                </div>
            </div>

            {{-- Native options --}}
            <div class="card mb-4" id="nativeSection">
                <div class="card-header"><i class="bi bi-toggles me-2"></i>Test Options</div>
                <div class="card-body row g-3">
                    @foreach(['shuffle_questions'=>'Shuffle question order','shuffle_options'=>'Shuffle answer options','show_results_immediately'=>'Show results to taker immediately','allow_retake'=>'Allow retakes'] as $name=>$label)
                    <div class="col-12 col-sm-6">
                        <div class="d-flex align-items-center gap-3 p-2 rounded-3" style="background:var(--body-bg);">
                            <input type="checkbox" name="{{ $name }}" class="form-check-input" value="1"
                                   style="width:1.2rem;height:1.2rem;"
                                   {{ old($name, in_array($name,['show_results_immediately'])) ? 'checked':'' }}>
                            <label style="font-size:.85rem;font-weight:600;">{{ $label }}</label>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Sidebar --}}
        <div class="col-12 col-lg-4">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-link-45deg me-2"></i>Link to Position / Programme</div>
                <div class="card-body row g-3">
                    <div id="jobPostingField">
                        <label class="form-label">Job Posting (for Placement Tests)</label>
                        <select name="job_posting_id" class="form-select">
                            <option value="">None</option>
                            @foreach($postings as $p)
                            <option value="{{ $p->id }}" {{ old('job_posting_id')==$p->id?'selected':'' }}>{{ $p->title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div id="trainingField">
                        <label class="form-label">Training Programme (for Upskilling Tests)</label>
                        <select name="training_id" class="form-select">
                            <option value="">None</option>
                            @foreach($trainings as $t)
                            <option value="{{ $t->id }}" {{ old('training_id')==$t->id?'selected':'' }}>{{ $t->title }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-graph-up-arrow me-2"></i>Score Push</div>
                <div class="card-body row g-3">
                    <div>
                        <label class="form-label">Recruitment Criterion</label>
                        <select name="recruitment_criterion_id" class="form-select">
                            <option value="">None</option>
                            @foreach($recCriteria as $rc)
                            <option value="{{ $rc->id }}" {{ old('recruitment_criterion_id')==$rc->id?'selected':'' }}>
                                {{ $rc->name }} ({{ $rc->jobPosting?->title ?? 'No posting' }})
                            </option>
                            @endforeach
                        </select>
                        <div class="form-text">Score auto-pushes to this criterion after test completion.</div>
                    </div>
                    <div>
                        <label class="form-label">Evaluation Criterion</label>
                        <select name="evaluation_criterion_id" class="form-select">
                            <option value="">None</option>
                            @foreach($evalCriteria as $ec)
                            <option value="{{ $ec->id }}" {{ old('evaluation_criterion_id')==$ec->id?'selected':'' }}>
                                {{ $ec->name }}
                            </option>
                            @endforeach
                        </select>
                        <div class="form-text">Score auto-pushes to this employee evaluation criterion.</div>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary btn-lg w-100">
                <i class="bi bi-check-lg me-2"></i>Create Test
            </button>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
function selectSource(src) {
    document.getElementById('sourceInput').value = src;
    document.getElementById('card-native').classList.toggle('selected', src === 'native');
    document.getElementById('card-moodle').classList.toggle('selected', src === 'moodle');
    document.getElementById('moodleSection').style.display = src === 'moodle' ? '' : 'none';
    document.getElementById('nativeSection').style.display = src === 'native' ? '' : 'none';
}

function onTypeChange(type) {
    document.getElementById('jobPostingField').style.display = type === 'recruitment' ? '' : 'none';
    document.getElementById('trainingField').style.display   = type !== 'recruitment' ? '' : 'none';
}

function updateQuizUrl() {
    const sel = document.getElementById('moodleQuizSelect');
    const opt = sel.options[sel.selectedIndex];
    const url = opt?.dataset?.url || '';
    document.getElementById('moodleQuizUrl').value = url;
}

// Init
selectSource('{{ old("source","native") }}');
onTypeChange('{{ old("type","recruitment") }}');
</script>
@endpush