@extends('layouts.admin')

@section('title', setting('school_name', 'ShulePoint') . ' | ' . ($scheme->exists ? 'Edit Scheme' : 'New Scheme'))
@section('page-title', $scheme->exists ? 'Edit Scheme of Work' : 'New Scheme of Work')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-9">
        <div class="card card-outline card-primary shadow-sm learner-card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-tasks mr-1"></i> {{ $scheme->exists ? 'Edit' : 'New' }} scheme of work</h3>
                <div class="card-tools"><a href="{{ url()->previous() }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left mr-1"></i> Back</a></div>
            </div>
            <form method="POST" action="{{ $formAction }}">
                @csrf @if($formMethod === 'PUT') @method('PUT') @endif
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <label class="fld-label">Learning area <span class="text-danger">*</span></label>
                            <select name="subject_id" id="fSubject" required class="form-control form-control-sm @error('subject_id') is-invalid @enderror">
                                <option value="">— Select —</option>
                                @foreach($subjects as $s)<option value="{{ $s->id }}" @selected((string) old('subject_id', $scheme->subject_id) === (string) $s->id)>{{ $s->name }}</option>@endforeach
                            </select>
                            @error('subject_id')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                        <div class="col-md-3">
                            <label class="fld-label">Grade</label>
                            <select name="grade_level_id" id="fGrade" class="form-control form-control-sm">
                                <option value="">—</option>
                                @foreach($grades as $g)<option value="{{ $g->id }}" @selected((string) old('grade_level_id', $scheme->grade_level_id) === (string) $g->id)>{{ $g->name }}</option>@endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="fld-label">Term</label>
                            <select name="term_id" class="form-control form-control-sm">
                                <option value="">—</option>
                                @foreach($terms as $t)<option value="{{ $t->id }}" @selected((string) old('term_id', $scheme->term_id) === (string) $t->id)>{{ $t->name }}</option>@endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <label class="fld-label">Strand</label>
                            <select name="strand_id" id="fStrand" class="form-control form-control-sm" data-selected="{{ old('strand_id', $scheme->strand_id) }}">
                                <option value="">— Select learning area first —</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="fld-label">Sub-strand</label>
                            <select name="sub_strand_id" id="fSubStrand" class="form-control form-control-sm" data-selected="{{ old('sub_strand_id', $scheme->sub_strand_id) }}">
                                <option value="">—</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-3">
                            <label class="fld-label">Week</label>
                            <input name="week" type="number" min="1" max="52" value="{{ old('week', $scheme->week) }}" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-3">
                            <label class="fld-label">Lesson no.</label>
                            <input name="lesson_no" type="number" min="1" value="{{ old('lesson_no', $scheme->lesson_no) }}" class="form-control form-control-sm">
                        </div>
                        <div class="col-md-6">
                            <label class="fld-label">Topic <span class="text-danger">*</span></label>
                            <input name="topic" required value="{{ old('topic', $scheme->topic) }}" class="form-control form-control-sm @error('topic') is-invalid @enderror" placeholder="e.g. Addition of whole numbers">
                            @error('topic')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-12">
                            <label class="fld-label">Sub-topic</label>
                            <input name="sub_topic" value="{{ old('sub_topic', $scheme->sub_topic) }}" class="form-control form-control-sm">
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-12">
                            <label class="fld-label">Objectives</label>
                            <textarea name="objectives" rows="2" class="form-control form-control-sm">{{ old('objectives', $scheme->objectives) }}</textarea>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <label class="fld-label">Learning resources</label>
                            <textarea name="learning_resources" rows="2" class="form-control form-control-sm">{{ old('learning_resources', $scheme->learning_resources) }}</textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="fld-label">Reference materials</label>
                            <textarea name="reference_materials" rows="2" class="form-control form-control-sm">{{ old('reference_materials', $scheme->reference_materials) }}</textarea>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-12">
                            <label class="fld-label">Remarks</label>
                            <textarea name="remarks" rows="1" class="form-control form-control-sm">{{ old('remarks', $scheme->remarks) }}</textarea>
                        </div>
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-end">
                    <button class="btn btn-sm btn-primary"><i class="fas fa-check mr-1"></i> {{ $scheme->exists ? 'Update' : 'Save' }} Scheme</button>
                </div>
            </form>
        </div>
    </div>
</div>
@push('scripts')
<script>
(function () {
    var strandUrl = @json(route('curriculum.strand-options'));
    var subUrl = @json(route('curriculum.sub-strand-options'));
    var fSubject = document.getElementById('fSubject');
    var fGrade = document.getElementById('fGrade');
    var fStrand = document.getElementById('fStrand');
    var fSub = document.getElementById('fSubStrand');
    if (!fSubject) return;
    function fill(sel, items, placeholder) {
        var keep = sel.getAttribute('data-selected') || '';
        sel.innerHTML = '';
        var o = document.createElement('option');
        o.value = '';
        o.textContent = placeholder;
        sel.appendChild(o);
        items.forEach(function (it) {
            var op = document.createElement('option');
            op.value = it.id;
            op.textContent = (it.code ? it.code + ' — ' : '') + it.name;
            if (String(it.id) === String(keep)) op.selected = true;
            sel.appendChild(op);
        });
    }
    function loadStrands() {
        if (!fSubject.value) { fill(fStrand, [], '— Select learning area first —'); fill(fSub, [], '—'); return; }
        var url = strandUrl + '?subject_id=' + encodeURIComponent(fSubject.value);
        if (fGrade && fGrade.value) url += '&grade_level_id=' + encodeURIComponent(fGrade.value);
        fetch(url, { headers: { 'Accept': 'application/json' } })
            .then(function (r) { return r.json(); })
            .then(function (d) { fill(fStrand, d.data || [], '— Select strand —'); loadSubs(); });
    }
    function loadSubs() {
        if (!fStrand.value) { fill(fSub, [], '—'); return; }
        fetch(subUrl + '?strand_id=' + encodeURIComponent(fStrand.value), { headers: { 'Accept': 'application/json' } })
            .then(function (r) { return r.json(); })
            .then(function (d) { fill(fSub, d.data || [], '— Select sub-strand —'); });
    }
    fSubject.addEventListener('change', loadStrands);
    if (fGrade) fGrade.addEventListener('change', loadStrands);
    fStrand.addEventListener('change', loadSubs);
    loadStrands();
})();
</script>
@endpush
@endsection