@extends('layouts.teacher')

@php
    $editing = $homework !== null;
    $selectedIds = old('student_ids', $homework?->assignees?->pluck('id')->all() ?? []);
    $audience = old('audience', ($homework && $homework->assignees->isNotEmpty()) ? 'selected' : 'all');
    $dueTime = old('due_time', $homework?->due_time ? substr((string) $homework->due_time, 0, 5) : '');
@endphp

@section('title', ($editing ? 'Edit homework' : 'Create homework').' · '.config('brand.name'))

@section('content')
    <div class="content">
        <x-admin.page-header
            kicker="Homework"
            :title="$editing ? 'Edit homework' : 'Create homework'"
            meta="Attach homework to a subject you teach. Assign it to all currently enrolled students, or choose specific children. Parents are emailed when you assign."
        >
            <x-slot:actions>
                <a href="{{ route('teacher.homework.index', 'assigned') }}" class="btn mec-btn-secondary btn-md">Back</a>
            </x-slot:actions>
        </x-admin.page-header>

        @if (session('status'))
            <div class="alert alert-success">{{ session('status') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">{{ $errors->first() }}</div>
        @endif

        @if ($lessons->isEmpty())
            <div class="card mec-panel">
                <div class="card-body">
                    <p class="mec-empty mb-0">You are not assigned to a subject yet. Super Admin assigns you to a subject, then you can create homework for enrolled students.</p>
                </div>
            </div>
        @else
            <form id="homework-form" method="POST" action="{{ $editing ? route('teacher.homework.update', $homework) : route('teacher.homework.store') }}" enctype="multipart/form-data">
                @csrf
                @if ($editing)
                    @method('PUT')
                @endif

                <div class="card mec-panel mb-3">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label" for="lesson_id">Subject</label>
                                <select class="form-select" id="lesson_id" name="lesson_id" required>
                                    @foreach ($lessons as $option)
                                        <option value="{{ $option->id }}" @selected((int) old('lesson_id', $lesson?->id) === (int) $option->id)>{{ $option->academicLabel() }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" for="title">Title</label>
                                <input class="form-control" id="title" name="title" value="{{ old('title', $homework?->title) }}" required maxlength="160" placeholder="e.g. Algebra practice worksheet 1">
                            </div>
                            <div class="col-12">
                                <label class="form-label" for="details">Details</label>
                                <textarea class="form-control" id="details" name="details" rows="3" placeholder="What this homework covers">{{ old('details', $homework?->details) }}</textarea>
                            </div>
                            <div class="col-12">
                                <label class="form-label" for="instructions">Instructions</label>
                                <textarea class="form-control" id="instructions" name="instructions" rows="4" placeholder="What students must do, show, or submit">{{ old('instructions', $homework?->instructions) }}</textarea>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label" for="submission_type">How to submit</label>
                                <select class="form-select" id="submission_type" name="submission_type">
                                    @foreach (\App\Models\LessonHomework::submissionTypes() as $value => $label)
                                        <option value="{{ $value }}" @selected(old('submission_type', $homework?->submission_type ?? 'platform') === $value)>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label" for="total_marks">Marks</label>
                                <input class="form-control" id="total_marks" type="number" min="1" name="total_marks" value="{{ old('total_marks', $homework?->total_marks) }}">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label" for="attempts_allowed">Attempts</label>
                                <input class="form-control" id="attempts_allowed" type="number" min="1" max="10" name="attempts_allowed" value="{{ old('attempts_allowed', $homework?->attempts_allowed ?? 1) }}">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label" for="due_on">Due date</label>
                                <input class="form-control" id="due_on" type="date" name="due_on" value="{{ old('due_on', $homework?->due_on?->toDateString()) }}">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label" for="due_time">Due time</label>
                                <input class="form-control" id="due_time" type="time" name="due_time" value="{{ $dueTime }}">
                            </div>
                            <div class="col-md-6">
                                <input type="hidden" name="teacher_marking" value="0">
                                <label class="mb-0">
                                    <input type="checkbox" name="teacher_marking" value="1" @checked(old('teacher_marking', $homework?->teacher_marking ?? true))>
                                    Teacher marks this homework
                                </label>
                            </div>
                            <div class="col-md-6">
                                <input type="hidden" name="allows_resubmission" value="0">
                                <label class="mb-0">
                                    <input type="checkbox" name="allows_resubmission" value="1" @checked(old('allows_resubmission', $homework?->allows_resubmission ?? false))>
                                    Allow resubmission
                                </label>
                            </div>
                            <div class="col-12">
                                <label class="form-label" for="files">Attach files</label>
                                @if ($editing && $homework->resources->isNotEmpty())
                                    <ul class="mb-2">
                                        @foreach ($homework->resources as $resource)
                                            <li class="mb-1">
                                                {{ $resource->original_filename ?: $resource->title }}
                                                <label class="ms-2 mb-0">
                                                    <input type="checkbox" name="remove_resource_ids[]" value="{{ $resource->id }}">
                                                    Remove
                                                </label>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif
                                <input class="form-control" id="files" type="file" name="files[]" multiple>
                                <p class="text-muted fs-13 mb-0 mt-1">Worksheet, PDF, photo or other file students and parents should download. You can attach more than one.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mec-panel mb-3">
                    <div class="card-body">
                        <p class="form-label">Assign to</p>
                        <label class="me-4">
                            <input type="radio" name="audience" value="all" @checked($audience === 'all')>
                            All currently enrolled students
                        </label>
                        <label>
                            <input type="radio" name="audience" value="selected" @checked($audience === 'selected')>
                            Specific students
                        </label>
                        <p class="text-muted fs-13 mt-2 mb-3">Choosing all enrolled students keeps this homework visible to children who enrol later. Specific students only those you tick now.</p>
                        <div id="student-picker" class="{{ $audience === 'selected' ? '' : 'd-none' }}">
                            <div id="student-list" class="d-flex flex-wrap gap-3"></div>
                            <p id="student-empty" class="mec-empty mb-0 d-none">No students are enrolled in this subject yet. A parent must enrol the child first.</p>
                        </div>
                    </div>
                </div>

                <div class="card mec-panel mb-4">
                    <div class="card-footer bg-white d-flex flex-wrap justify-content-end flex-row-reverse gap-2">
                        <button type="submit" name="action" value="assign" class="btn mec-btn-navy btn-md">Create assignment</button>
                        <button type="submit" name="action" value="draft" class="btn mec-btn-secondary btn-md">Save</button>
                    </div>
                </div>
            </form>
        @endif
    </div>
@endsection

@section('scripts')
    <script>
        (function () {
            const rosters = @json($rosters);
            const selected = @json(array_map('intval', $selectedIds));
            const lessonSelect = document.getElementById('lesson_id');
            const picker = document.getElementById('student-picker');
            const list = document.getElementById('student-list');
            const empty = document.getElementById('student-empty');
            if (! lessonSelect || ! list) {
                return;
            }

            function renderStudents() {
                const students = rosters[lessonSelect.value] || [];
                list.innerHTML = '';
                students.forEach(function (student) {
                    const label = document.createElement('label');
                    label.className = 'mb-0';
                    const box = document.createElement('input');
                    box.type = 'checkbox';
                    box.name = 'student_ids[]';
                    box.value = String(student.id);
                    box.checked = selected.indexOf(student.id) !== -1;
                    label.appendChild(box);
                    label.appendChild(document.createTextNode(' ' + student.name));
                    list.appendChild(label);
                });
                empty.classList.toggle('d-none', students.length > 0);
            }

            document.querySelectorAll('input[name="audience"]').forEach(function (input) {
                input.addEventListener('change', function () {
                    if (! input.checked) {
                        return;
                    }
                    picker.classList.toggle('d-none', input.value !== 'selected');
                });
            });

            lessonSelect.addEventListener('change', renderStudents);
            renderStudents();
        })();
    </script>
@endsection