@extends('layouts.admin')

@section('title', setting('school_name', 'ShulePoint') . ' | Create Timetable for My Class')
{{-- Block form: the inline @section($name, $value) form does not compile
     {{ }}, so the class name would be printed as literal echo() text. --}}
@section('page-title')
    Create Timetable — {{ $class->name }}
@endsection

@section('content')
<div class="mb-3">
    <a href="{{ route('my-timetable') }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left mr-1"></i> Back to My Timetable</a>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card card-outline card-primary shadow-sm">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-plus mr-1"></i> New Timetable for {{ $class->name }}</h3>
            </div>
            <form action="{{ route('timetables.teacher-store') }}" method="POST" id="timetable-form">
                @csrf
                <input type="hidden" name="school_class_id" value="{{ $class->id }}">
                <input type="hidden" name="academic_year_id" value="{{ $class->academic_year_id }}">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="fld-label">Term <span class="text-danger">*</span></label>
                                <select name="term_id" class="form-control form-control-sm @error('term_id') is-invalid @enderror" required>
                                    <option value="">Select Term</option>
                                    @foreach($terms as $t)
                                        <option value="{{ $t->id }}">{{ $t->name }} ({{ $t->academicYear->name ?? '' }})</option>
                                    @endforeach
                                </select>
                                @error('term_id')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="fld-label">Timetable Name</label>
                                <input type="text" name="name" value="{{ old('name', 'Class Timetable') }}" class="form-control form-control-sm @error('name') is-invalid @enderror" placeholder="e.g. Term 1 Timetable">
                                @error('name')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                            </div>
                        </div>
                    </div>
                    <div class="form-group form-check">
                        <input type="checkbox" name="is_active" value="1" class="form-check-input" id="isActive" @checked(old('is_active', true))>
                        <label class="form-check-label" for="isActive">Set as active timetable (deactivates others for this class/term)</label>
                    </div>
                    <div class="form-group">
                        <label class="fld-label">Notes</label>
                        <textarea name="notes" rows="2" class="form-control form-control-sm" placeholder="Optional notes...">{{ old('notes') }}</textarea>
                    </div>

                    <hr>
                    <h5 class="mb-3"><i class="fas fa-clock mr-1"></i> Periods</h5>
                    <p class="small text-muted mb-3">Add periods manually or use the <a href="{{ route('timetables.teacher-ai', ['class_id' => $class->id]) }}">AI assistant</a> to draft a balanced schedule.</p>

                    <div id="entries-container">
                        {{-- Periods will be added dynamically --}}
                    </div>

                    <button type="button" id="add-period-btn" class="btn btn-sm btn-outline-primary mb-3"><i class="fas fa-plus mr-1"></i> Add Period</button>
                </div>
                <div class="card-footer d-flex justify-content-between flex-wrap">
                    <a href="{{ route('my-timetable') }}" class="btn btn-sm btn-outline-secondary">Cancel</a>
                    <button type="submit" class="btn btn-sm btn-primary"><i class="fas fa-save mr-1"></i> Save Timetable</button>
                </div>
            </form>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card shadow-sm">
            <div class="card-header"><h3 class="card-title"><i class="fas fa-info-circle mr-1"></i> Tips</h3></div>
            <div class="card-body">
                <h6 class="font-weight-bold mb-2"><i class="fas fa-layer-group text-primary mr-1"></i> Period Structure</h6>
                <p class="small text-muted mb-2">Each period needs: Subject, Teacher (optional), Day, Start/End Time, Period Number, Room (optional), Type.</p>
                <h6 class="font-weight-bold mb-2"><i class="fas fa-sort-numeric-up text-info mr-1"></i> Period Numbers</h6>
                <p class="small text-muted mb-2">Period numbers (1-12) determine display order within a day. Keep them sequential.</p>
                <h6 class="font-weight-bold mb-2"><i class="fas fa-door-open text-warning mr-1"></i> Types</h6>
                <p class="small text-muted mb-2"><strong>Lesson</strong> = regular class. <strong>Break</strong> = recess/lunch. <strong>Assembly</strong> = morning assembly. <strong>Activity</strong> = sports/clubs. <strong>Study</strong> = supervised study.</p>
                <h6 class="font-weight-bold mb-2"><i class="fas fa-robot text-success mr-1"></i> AI Generation</h6>
                <p class="small text-muted mb-0">For best results, ensure subjects have assigned teachers. Use the <a href="{{ route('timetables.teacher-ai', ['class_id' => $class->id]) }}">AI assistant</a> for a balanced weekly schedule.</p>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    const container = document.getElementById('entries-container');
    const addBtn = document.getElementById('add-period-btn');
    const days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
    const subjects = JSON.parse('{{ json_encode($subjects->map(fn($s) => ["id" => $s->id, "name" => $s->name, "teacher_id" => $s->teacher_id, "teacher_name" => $s->teacher?->full_name])->toArray()) }}');
    const teachers = JSON.parse('{{ json_encode($teachers->map(fn($t) => ["id" => $t->id, "name" => $t->full_name])->toArray()) }}');
    let periodCount = 0;

    function createPeriodRow(data = {}) {
        periodCount++;
        const row = document.createElement('div');
        row.className = 'card card-outline card-secondary shadow-sm mb-2 period-row';
        row.innerHTML = `
            <div class="card-header d-flex justify-content-between">
                <span class="font-weight-bold">Period <span class="period-num">${periodCount}</span></span>
                <button type="button" class="btn btn-xs btn-outline-danger remove-period"><i class="fas fa-trash"></i></button>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="fld-label">Subject <span class="text-danger">*</span></label>
                            <select name="entries[${periodCount-1}][subject_id]" class="form-control form-control-sm subject-select" required>
                                <option value="">Select Subject</option>
                                ${subjects.map(s => `<option value="${s.id}" ${data.subject_id == s.id ? 'selected' : ''}>${s.name}${s.teacher_name ? ' (T: '+s.teacher_name+')' : ''}</option>`).join('')}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="fld-label">Teacher</label>
                            <select name="entries[${periodCount-1}][teacher_id]" class="form-control form-control-sm teacher-select">
                                <option value="">Auto-assign from subject</option>
                                ${teachers.map(t => `<option value="${t.id}" ${data.teacher_id == t.id ? 'selected' : ''}>${t.name}</option>`).join('')}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="fld-label">Day <span class="text-danger">*</span></label>
                            <select name="entries[${periodCount-1}][day]" class="form-control form-control-sm" required>
                                ${days.map(d => `<option value="${d}" ${data.day == d ? 'selected' : ''}>${d.charAt(0).toUpperCase()+d.slice(1)}</option>`).join('')}
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="fld-label">Start Time <span class="text-danger">*</span></label>
                            <input type="time" name="entries[${periodCount-1}][start_time]" value="${data.start_time || ''}" class="form-control form-control-sm" required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="fld-label">End Time <span class="text-danger">*</span></label>
                            <input type="time" name="entries[${periodCount-1}][end_time]" value="${data.end_time || ''}" class="form-control form-control-sm" required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="fld-label">Period # <span class="text-danger">*</span></label>
                            <input type="number" name="entries[${periodCount-1}][period_number]" value="${data.period_number || periodCount}" class="form-control form-control-sm" min="1" max="12" required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="fld-label">Room</label>
                            <input type="text" name="entries[${periodCount-1}][room]" value="${data.room || ''}" class="form-control form-control-sm" placeholder="e.g. Classroom 1, Lab, Field">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="fld-label">Type</label>
                            <select name="entries[${periodCount-1}][type]" class="form-control form-control-sm">
                                <option value="lesson" ${data.type == 'lesson' ? 'selected' : ''}>Lesson</option>
                                <option value="break" ${data.type == 'break' ? 'selected' : ''}>Break</option>
                                <option value="assembly" ${data.type == 'assembly' ? 'selected' : ''}>Assembly</option>
                                <option value="activity" ${data.type == 'activity' ? 'selected' : ''}>Activity</option>
                                <option value="study" ${data.type == 'study' ? 'selected' : ''}>Study</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="fld-label">Notes</label>
                    <textarea name="entries[${periodCount-1}][notes]" rows="1" class="form-control form-control-sm" placeholder="Optional notes...">${data.notes || ''}</textarea>
                </div>
            `;
        container.appendChild(row);

        row.querySelector('.subject-select').addEventListener('change', function() {
            const subjectId = this.value;
            const subject = subjects.find(s => s.id == subjectId);
            if (subject && subject.teacher_id) {
                row.querySelector('.teacher-select').value = subject.teacher_id;
            }
        });

        row.querySelector('.remove-period').addEventListener('click', function() {
            row.remove();
            renumberPeriods();
        });
    }

    function renumberPeriods() {
        const rows = container.querySelectorAll('.period-row');
        rows.forEach((row, index) => {
            row.querySelector('.period-num').textContent = index + 1;
            const inputs = row.querySelectorAll('[name^="entries["]');
            inputs.forEach(input => {
                input.name = input.name.replace(/entries\[\d+\]/, `entries[${index}]`);
            });
        });
        periodCount = rows.length;
    }

    addBtn.addEventListener('click', () => createPeriodRow());

    // Add first period by default
    createPeriodRow();
})();
</script>
@endpush
@endsection