@extends('layouts.app')

@section('title', 'Расписание')

{{--
    Ports app/Views/schedule/index.php (legacy) — see the Phase 45 plan.
    Legacy renders this page with just header.php (no sidebar); this port
    uses the standard shared layout like every other migrated page instead
    (a deliberate, low-stakes cosmetic simplification, not a preserved-bug
    situation — see the plan for why).

    getAllWithDetails() has no date-range or is_active filtering at all —
    stale/expired schedule slots and inactive groups can still appear in
    this grid, preserved verbatim.
--}}

@push('styles')
<style>
#schedule-table {
    table-layout: fixed;
    width: 100%;
}
#schedule-table th, #schedule-table td {
    text-align: center;
    vertical-align: middle;
    height: 70px;
    overflow: hidden;
    word-wrap: break-word;
}
.lesson-cell {
    font-weight: bold;
}
.lesson-teacher {
    font-size: 0.8em;
    color: var(--ax-gray-700, #333);
    display: block;
    margin-top: 4px;
}
.day-button.active {
    background-color: var(--ax-primary, #0d6efd);
    border-color: var(--ax-primary, #0d6efd);
    color: white;
}
</style>
@endpush

@section('content')
    <div class="container-fluid">
        <h1 class="mb-3">Расписание по кабинетам</h1>

        <div class="btn-group mb-3" role="group">
            @foreach ($days as $i => $day)
                <button type="button" class="btn btn-outline-primary day-button" data-day="{{ $i }}">
                    {{ $day }}
                </button>
            @endforeach
        </div>

        <div class="table-responsive">
            <table class="table table-bordered" id="schedule-table">
                <thead>
                    <tr>
                        <th>Время</th>
                        @foreach ($classrooms as $c)
                            <th>{{ $c['name'] }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
<script>
const schedule = @json($schedule);
const classrooms = @json($classrooms);
const intervals = @json($intervals);

const colors = {
    'Математика': '#90EE90',
    'Физика': '#ADD8E6',
    'Химия': '#F08080',
    'Казахский язык': '#FFFFE0',
    'История': '#FFB6C1',
    'Биология': '#D3D3D3',
    'Английский язык': '#FFFFE0',
    'География': '#FFA500',
    'Русский язык': '#008000',
    'Информатика': '#FF0000',
    'Всемирная история': '#FFA500',
};

function getClassroomColumns(dayIndex) {
    const counts = {};
    classrooms.forEach(c => counts[c.id] = 1);

    intervals.forEach(time => {
        classrooms.forEach(c => {
            const lessons = schedule.filter(item =>
                item.classroom_id == c.id &&
                item.begin_time.substr(0,5) == time &&
                ((parseInt(item.weekdays) >> dayIndex) & 1)
            );
            if (lessons.length > counts[c.id]) {
                counts[c.id] = lessons.length;
            }
        });
    });

    return counts;
}

function renderSchedule(dayIndex=0) {
    const tbody = document.querySelector('#schedule-table tbody');
    const theadRow = document.querySelector('#schedule-table thead tr');

    tbody.innerHTML = '';
    theadRow.innerHTML = '<th>Время</th>';

    const classroomCols = [];
    const colCounts = getClassroomColumns(dayIndex);
    classrooms.forEach(c => {
        for (let i=0; i<colCounts[c.id]; i++) {
            classroomCols.push({id: c.id, name: c.name, index: i});
            theadRow.innerHTML += `<th>${c.name}${colCounts[c.id] > 1 ? ' ('+(i+1)+')' : ''}</th>`;
        }
    });

    intervals.forEach(time => {
        let row = `<tr><td>${time}</td>`;

        classroomCols.forEach(col => {
            let cellContent = '';
            let teacherText = '';
            let lessonColor = 'white';

            const lessons = schedule.filter(item =>
                item.classroom_id == col.id &&
                item.begin_time.substr(0,5) == time &&
                ((parseInt(item.weekdays) >> dayIndex) & 1)
            );

            if (lessons[col.index]) {
                const item = lessons[col.index];
                cellContent = `<a href="/admin/group_admin_info.php?group_id=${item.group_id}">
                                  ${item.group_name}
                               </a>`;
                teacherText = item.name || '';
                lessonColor = colors[item.discipline_name] || 'white';
            }

            row += `<td style="background-color:${lessonColor}" class="lesson-cell">
                        ${cellContent}
                        <span class="lesson-teacher">${teacherText}</span>
                    </td>`;
        });

        row += '</tr>';
        tbody.innerHTML += row;
    });
}

document.addEventListener('DOMContentLoaded', () => {
    const buttons = document.querySelectorAll('.day-button');
    buttons.forEach(btn => {
        btn.addEventListener('click', () => {
            const day = parseInt(btn.dataset.day);
            renderSchedule(day);

            buttons.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
        });
    });

    buttons[0].classList.add('active');
    renderSchedule(0);
});
</script>
@endpush