@extends('layouts.admin')

@section('title', setting('school_name', 'ShulePoint') . ' | Edit Timetable')
@section('page-title', 'Edit: ' . $timetable->name)

@section('content')
<div class="mb-3">
    <a href="{{ route('timetables.show', $timetable) }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left mr-1"></i> Back to View</a>
    <a href="{{ route('timetables.pdf', $timetable) }}" class="btn btn-sm btn-info ml-2"><i class="fas fa-file-pdf mr-1"></i> Export PDF</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-edit mr-1"></i> Edit Timetable</h3>
            </div>
            <form action="{{ route('timetables.update', $timetable) }}" method="POST" id="timetable-form">
                @csrf @method('PUT')
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="fld-label">Class <span class="text-danger">*</span></label>
                                <select name="school_class_id" class="form-control form-control-sm @error('school_class_id') is-invalid @enderror" required>
                                    <option value="">Select Class</option>
                                    @foreach($classes as $c)
                                        <option value="{{ $c->id }}" {{ $timetable->school_class_id == $c->id ? 'selected' : '' }}>{{ $c->name }} ({{ $c->gradeLevel->name ?? '' }})</option>
                                    @endforeach
                                </select>
                                @error('school_class_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">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 }}" {{ $timetable->term_id == $t->id ? 'selected' : '' }}>{{ $t->name }} ({{ $t->academicYear->name ?? '' }})</option>
                                    @endforeach
                                </select>
                                @error('term_id')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="fld-label">Academic Year <span class="text-danger">*</span></label>
                                <select name="academic_year_id" class="form-control form-control-sm @error('academic_year_id') is-invalid @enderror" required>
                                    @php
                                        $years = [];
                                    @endphp
                                    @foreach($terms as $t)
                                        @php
                                            if (!array_key_exists($t->academic_year_id, $years)) {
                                                $years[$t->academic_year_id] = $t->academicYear ?? \App\Models\AcademicYear::find($t->academic_year_id);
                                            }
                                        @endphp
                                    @endforeach
                                    @foreach($years as $y)
                                        <option value="{{ $y->id }}" {{ $timetable->academic_year_id == $y->id ? 'selected' : '' }}>{{ $y->name }}</option>
                                    @endforeach
                                </select>
                                @error('academic_year_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', $timetable->name) }}" class="form-control form-control-sm @error('name') is-invalid @enderror">
                                @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" {{ $timetable->is_active ? 'checked' : '' }}>
                        <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">{{ old('notes', $timetable->notes) }}</textarea>
                    </div>

                    <hr>
                    <h5 class="mb-3"><i class="fas fa-clock mr-1"></i> Periods</h5>

                    <div id="entries-container">
                        {{-- Existing periods --}}
                        @php
                            $periodIndex = 0;
                        @endphp
                        @foreach($days as $day)
                            @if($entriesByDay->has($day))
                                @foreach($entriesByDay[$day] as $entry)
                                    @php
                                        $periodIndex++;
                                    @endphp
                                    <div class="card card-outline card-secondary shadow-sm mb-2 period-row" data-entry-id="{{ $entry->id }}">
                                        <div class="card-header d-flex justify-content-between">
                                            <span class="font-weight-bold">Period <span class="period-num">{{ $periodIndex }}</span></span>
                                            <button type="button" class="btn btn-xs btn-outline-danger remove-period" data-entry-id="{{ $entry->id }}"><i class="fas fa-trash"></i></button>
                                        </div>
                                        <div class="card-body">
                                            <input type="hidden" name="entries[{{ $periodIndex-1 }}][id]" value="{{ $entry->id }}">
                                            <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[{{ $periodIndex-1 }}][subject_id]" class="form-control form-control-sm subject-select" required>
                                                            <option value="">Select Subject</option>
                                                            @foreach($subjects as $s)
                                                                <option value="{{ $s->id }}" {{ $entry->subject_id == $s->id ? 'selected' : '' }}>{{ $s->name }}{{ $s->teacher ? ' (T: '.$s->teacher->full_name.')' : '' }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label class="fld-label">Teacher</label>
                                                        <select name="entries[{{ $periodIndex-1 }}][teacher_id]" class="form-control form-control-sm teacher-select">
                                                            <option value="">Auto-assign from subject</option>
                                                            @foreach($teachers as $t)
                                                                <option value="{{ $t->id }}" {{ $entry->teacher_id == $t->id ? 'selected' : '' }}>{{ $t->full_name }}</option>
                                                            @endforeach
                                                        </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[{{ $periodIndex-1 }}][day]" class="form-control form-control-sm" required>
                                                            @foreach($days as $d)
                                                                <option value="{{ $d }}" {{ $entry->day == $d ? 'selected' : '' }}>{{ ucfirst($d) }}</option>
                                                            @endforeach
                                                        </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[{{ $periodIndex-1 }}][start_time]" value="{{ $entry->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[{{ $periodIndex-1 }}][end_time]" value="{{ $entry->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[{{ $periodIndex-1 }}][period_number]" value="{{ $entry->period_number }}" 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[{{ $periodIndex-1 }}][room]" value="{{ $entry->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[{{ $periodIndex-1 }}][type]" class="form-control form-control-sm">
                                                            <option value="lesson" {{ $entry->type == 'lesson' ? 'selected' : '' }}>Lesson</option>
                                                            <option value="break" {{ $entry->type == 'break' ? 'selected' : '' }}>Break</option>
                                                            <option value="assembly" {{ $entry->type == 'assembly' ? 'selected' : '' }}>Assembly</option>
                                                            <option value="activity" {{ $entry->type == 'activity' ? 'selected' : '' }}>Activity</option>
                                                            <option value="study" {{ $entry->type == 'study' ? 'selected' : '' }}>Study</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="fld-label">Notes</label>
                                                <textarea name="entries[{{ $periodIndex-1 }}][notes]" rows="1" class="form-control form-control-sm">{{ $entry->notes }}</textarea>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        @endforeach
                    </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('timetables.show', $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> Update 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-trash text-danger mr-1"></i> Deleting Periods</h6>
                <p class="small text-muted mb-0">Click the trash icon on a period to mark it for deletion. It will be removed when you save.</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 = @php echo $periodIndex; @endphp;

    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() {
            const entryId = this.dataset.entryId;
            if (entryId) {
                // Add hidden input to mark for deletion
                const hidden = document.createElement('input');
                hidden.type = 'hidden';
                hidden.name = 'delete_entries[]';
                hidden.value = entryId;
                row.appendChild(hidden);
                row.style.display = 'none';
            } else {
                row.remove();
            }
            renumberPeriods();
        });
    }

    function renumberPeriods() {
        const rows = container.querySelectorAll('.period-row:not([style*="display: none"])');
        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());

    // Initialize remove buttons for existing entries
    container.querySelectorAll('.remove-period[data-entry-id]').forEach(btn => {
        btn.addEventListener('click', function() {
            const entryId = this.dataset.entryId;
            const row = this.closest('.period-row');
            const hidden = document.createElement('input');
            hidden.type = 'hidden';
            hidden.name = 'delete_entries[]';
            hidden.value = entryId;
            row.appendChild(hidden);
            row.style.display = 'none';
            renumberPeriods();
        });
    });
})();
</script>
@endpush
@endsection