@extends('layouts.app')

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

@push('styles')
<style>
#schedule-table {
    table-layout: auto;
    width: 100%;
}
#schedule-table th, #schedule-table td {
    text-align: center;
    vertical-align: middle;
    height: 70px;
    overflow: hidden;
    word-wrap: break-word;
    min-width: 100px;
}
.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;
}
.lesson-cell[draggable="true"] {
    cursor: grab;
}
.lesson-cell.drag-over {
    outline: 2px dashed var(--ax-primary, #0d6efd);
    outline-offset: -2px;
}
.day-button.drag-over {
    outline: 2px dashed var(--ax-primary, #0d6efd);
    outline-offset: -2px;
}
</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="ax-page-header">
        <h1 class="mb-0">Расписание по кабинетам</h1>
        <button class="btn btn-success" id="exportBtn">Экспорт в изображение</button>
    </div>

    <div class="btn-group mb-3 flex-wrap" 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>
let schedule = @json($schedule);
const classrooms = @json($classrooms);
const intervals = @json($intervals);
const canEdit = @json($canEdit);
let currentDay = 0;
let dragState = null;

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)
            );

            let dragAttrs = '';

            if (lessons[col.index]) {
                const item = lessons[col.index];
                lessonColor = colors[item.discipline_name] || '#ffffff';
                teacherText = item.name || '';

                cellContent = `
                    <div class="d-flex flex-column align-items-center justify-content-center">
                        <span class="badge text-truncate w-100"
                              style="background-color: ${lessonColor}; color: #000;">
                            <a href="/group_admin_info.php?group_id=${item.group_id}"
                               style="color: inherit; text-decoration: none;">
                               ${item.group_name}
                            </a>
                        </span>
                    </div>
                `;

                if (canEdit) {
                    dragAttrs = `draggable="true"
                        data-schedule-id="${item.id}"
                        data-group-id="${item.group_id}"`;
                }
            }

            row += `<td style="background-color: ${lessonColor}" class="lesson-cell"
                        data-time="${time}" data-classroom-id="${col.id}" ${dragAttrs}>
                        ${cellContent}
                        <span class="lesson-teacher">${teacherText}</span>
                    </td>`;
        });

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

async function moveSchedule(payload) {
    const response = await fetch('/move_schedule.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
        },
        body: JSON.stringify(payload),
    });

    const data = await response.json();

    if (!data.success) {
        alert(data.message || 'Не удалось изменить расписание.');
        return;
    }

    schedule = schedule.filter(item => item.id != payload.schedule_id);
    if (data.updated) schedule.push(data.updated);
    if (data.inserted) schedule.push(data.inserted);

    renderSchedule(currentDay);
}

function setupDragAndDrop() {
    const tbody = document.querySelector('#schedule-table tbody');

    tbody.addEventListener('dragstart', (e) => {
        const cell = e.target.closest('td[draggable="true"]');
        if (!cell) return;

        dragState = {
            scheduleId: parseInt(cell.dataset.scheduleId),
            groupId: parseInt(cell.dataset.groupId),
            sourceDay: currentDay,
            beginTime: cell.dataset.time,
            classroomId: parseInt(cell.dataset.classroomId),
        };
    });

    tbody.addEventListener('dragover', (e) => {
        const cell = e.target.closest('td.lesson-cell');
        if (!cell || !dragState) return;
        e.preventDefault();
        cell.classList.add('drag-over');
    });

    tbody.addEventListener('dragleave', (e) => {
        const cell = e.target.closest('td.lesson-cell');
        if (cell) cell.classList.remove('drag-over');
    });

    tbody.addEventListener('drop', (e) => {
        const cell = e.target.closest('td.lesson-cell');
        if (!cell || !dragState) return;
        e.preventDefault();
        cell.classList.remove('drag-over');

        const state = dragState;
        dragState = null;

        moveSchedule({
            schedule_id: state.scheduleId,
            group_id: state.groupId,
            source_day: state.sourceDay,
            target_day: currentDay,
            begin_time: cell.dataset.time,
            classroom_id: parseInt(cell.dataset.classroomId),
        });
    });

    const dayButtonGroup = document.querySelector('.btn-group');

    dayButtonGroup.addEventListener('dragover', (e) => {
        const btn = e.target.closest('.day-button');
        if (!btn || !dragState) return;
        e.preventDefault();
        btn.classList.add('drag-over');
    });

    dayButtonGroup.addEventListener('dragleave', (e) => {
        const btn = e.target.closest('.day-button');
        if (btn) btn.classList.remove('drag-over');
    });

    dayButtonGroup.addEventListener('drop', (e) => {
        const btn = e.target.closest('.day-button');
        if (!btn || !dragState) return;
        e.preventDefault();
        btn.classList.remove('drag-over');

        const state = dragState;
        dragState = null;

        moveSchedule({
            schedule_id: state.scheduleId,
            group_id: state.groupId,
            source_day: state.sourceDay,
            target_day: parseInt(btn.dataset.day),
            begin_time: state.beginTime,
            classroom_id: state.classroomId,
        });
    });
}

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

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

    buttons[0].classList.add('active');
    renderSchedule(0);

    if (canEdit) setupDragAndDrop();
});

document.getElementById('exportBtn').addEventListener('click', () => {
    const scheduleTable = document.getElementById('schedule-table');

    html2canvas(scheduleTable, { scale: 2 }).then(canvas => {
        const link = document.createElement('a');
        link.download = `schedule_${new Date().toISOString().slice(0,10)}.png`;
        link.href = canvas.toDataURL();
        link.click();
    }).catch(err => {
        console.error('Ошибка при экспорте:', err);
        alert('Не удалось экспортировать расписание.');
    });
});
</script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
@endpush