@csrf
<div class="row g-3">
    <div class="col-md-4">
        <label class="form-label">Class <span class="text-danger">*</span></label>
        <select name="class_id" id="yp_class" class="form-select @error('class_id') is-invalid @enderror" required>
            <option value="">— Select class —</option>
            @foreach($classes as $class)
                <option value="{{ $class->id }}" @selected(old('class_id', $plan->class_id) == $class->id)>{{ $class->name }}</option>
            @endforeach
        </select>
        @error('class_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-4">
        <label class="form-label">Section</label>
        <select name="section_id" id="yp_section" class="form-select">
            <option value="">— All / Whole class —</option>
        </select>
    </div>
    <div class="col-md-4">
        <label class="form-label">Subject <span class="text-danger">*</span></label>
        <select name="subject_id" class="form-select @error('subject_id') is-invalid @enderror" required>
            <option value="">— Select subject —</option>
            @foreach($subjects as $subject)
                <option value="{{ $subject->id }}" @selected(old('subject_id', $plan->subject_id) == $subject->id)>{{ $subject->name }}</option>
            @endforeach
        </select>
        @error('subject_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Plan Title <span class="text-danger">*</span></label>
        <input type="text" name="title" value="{{ old('title', $plan->title) }}" class="form-control @error('title') is-invalid @enderror" placeholder="e.g. Annual Plan — Mathematics" required>
        @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-3">
        <label class="form-label">Period</label>
        <input type="text" name="period" value="{{ old('period', $plan->period) }}" class="form-control" placeholder="Annual / Term 1 / January">
    </div>
    <div class="col-md-3">
        <label class="form-label">Session</label>
        <select name="academic_session_id" class="form-select">
            <option value="">— None —</option>
            @foreach($sessions as $s)
                <option value="{{ $s->id }}" @selected(old('academic_session_id', $plan->academic_session_id ?? optional($sessions->firstWhere('is_current',true))->id) == $s->id)>{{ $s->name }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-12">
        <label class="form-label">Plan Details / Notes</label>
        <textarea name="description" rows="5" class="form-control" placeholder="Describe the plan, topics, monthly breakdown, objectives…">{{ old('description', $plan->description) }}</textarea>
    </div>

    <div class="col-md-6">
        <label class="form-label">Plan Image</label>
        <input type="file" name="image" accept="image/*" class="form-control @error('image') is-invalid @enderror">
        @error('image')<div class="invalid-feedback">{{ $message }}</div>@enderror
        <div class="form-text">JPG / PNG / WEBP, up to 4 MB.</div>
        @if($plan->image_url ?? false)
            <div class="mt-2"><img src="{{ $plan->image_url }}" class="rounded border" style="max-height:120px"></div>
        @endif
    </div>
</div>

<div class="mt-4 d-flex gap-2">
    <button class="btn btn-primary"><i class="bi bi-check-lg me-1"></i>{{ $submitLabel ?? 'Save' }}</button>
    <a href="{{ route('yearly-plans.index') }}" class="btn btn-light border">Cancel</a>
</div>

@push('scripts')
<script>
    const YP_SECTIONS = @json($sections);
    const ypSelected = @json(old('section_id', $plan->section_id));
    function ypLoadSections() {
        const classId = document.getElementById('yp_class').value;
        const sel = document.getElementById('yp_section');
        sel.innerHTML = '<option value="">— All / Whole class —</option>';
        YP_SECTIONS.filter(s => String(s.class_id) === String(classId)).forEach(s => {
            const o = document.createElement('option');
            o.value = s.id; o.textContent = s.name;
            if (String(s.id) === String(ypSelected)) o.selected = true;
            sel.appendChild(o);
        });
    }
    document.getElementById('yp_class').addEventListener('change', ypLoadSections);
    ypLoadSections();
</script>
@endpush
