@extends('layouts.app')

@php
    $pageTitle = 'Academic Setup';

    $totalSections = $sections->count();
    $totalShiftTypes = $shiftTypes->count();

    $subjectTypeLabels = [
        'core' => 'Core',
        'elective' => 'Elective',
        'hgp' => 'HGP',
    ];

    $roomTypeLabels = [
        'general' => 'General',
        'laboratory' => 'Laboratory',
        'workshop' => 'Workshop',
    ];

    $shiftTypeMap = $shiftTypes->keyBy('id');
@endphp

@section('page-nav')
    <button type="button" class="page-nav-link active" data-target="tab-pathways">Tracks and Subjects</button>
    <button type="button" class="page-nav-link" data-target="tab-sections">Sections and Rooms</button>
    <button type="button" class="page-nav-link" data-target="tab-shifts">Shift Timeframe Setup</button>
@endsection

@section('content')

<div class="setup-meta-bar" id="summaryCardsContainer">
    @include('academic-setup.partials._summary-cards')
</div>

<div class="tab-pane active" id="tab-pathways">
    <div class="row g-3">
        <div class="col-lg-4 col-xl-3">
            <div class="setup-card">
                <div class="panel-head">
                    <h6 class="panel-title">Tracks</h6>

                    <div class="panel-tools">
                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addPathwayModal">
                            <i class="bi bi-plus-lg"></i> Track
                        </button>
                    </div>
                </div>

                <div id="pathwaysListContainer">
                    @include('academic-setup.partials._pathways-list')
                </div>

                <div class="ref-row">
                    <span class="ref-label">Grades</span>
                    @forelse ($gradeLevels as $gradeLevel)
                        <span class="tag">{{ $gradeLevel->name }}</span>
                    @empty
                        <span class="filter-empty p-0">None found</span>
                    @endforelse
                </div>

                <div class="ref-row">
                    <span class="ref-label">Shifts</span>
                    @forelse ($shiftTypes as $shiftType)
                        <span class="tag">{{ $shiftType->name }}</span>
                    @empty
                        <span class="filter-empty p-0">None found</span>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="col-lg-8 col-xl-9">
            <div class="setup-card">
                <div class="panel-head">
                    <h6 class="panel-title">Subjects</h6>

                    <div class="panel-tools">
                        <input type="search" id="subjectSearch" class="form-control panel-search" placeholder="Search subjects" aria-label="Search subjects" autocomplete="off">
                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addSubjectModal">
                            <i class="bi bi-plus-lg"></i> Subject
                        </button>
                    </div>
                </div>

                <nav class="pill-filter" id="subjectTrackFilter">
                    <button type="button" class="track-filter-link active" data-pathway-filter="">All</button>
                    @foreach ($activePathways as $pathway)
                        <button type="button" class="track-filter-link" data-pathway-filter="{{ $pathway->id }}">{{ $pathway->name }}</button>
                    @endforeach
                    <button type="button" class="track-filter-link" data-pathway-filter="__activity__">Activities</button>
                </nav>

                <div id="subjectsTableContainer" class="setup-scroll">
                    @include('academic-setup.partials._subjects-table')
                </div>

                <div id="subjectTrackFilterEmpty" class="filter-empty" hidden></div>
            </div>
        </div>
    </div>
</div>

<div class="tab-pane" id="tab-sections">
    <div class="row g-3">
        <div class="col-lg-7">
            <div class="setup-card">
                <div class="panel-head">
                    <h6 class="panel-title">Sections</h6>

                    <div class="panel-tools">
                        <input type="search" id="sectionSearch" class="form-control panel-search" placeholder="Search sections" aria-label="Search sections" autocomplete="off">
                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addSectionModal">
                            <i class="bi bi-plus-lg"></i> Section
                        </button>
                    </div>
                </div>

                <div id="sectionsTableContainer" class="setup-scroll">
                    @include('academic-setup.partials._sections-table')
                </div>

                <div id="sectionsFilterEmpty" class="filter-empty" hidden>No sections match your search.</div>
            </div>
        </div>

        <div class="col-lg-5">
            <div class="setup-card">
                <div class="panel-head">
                    <h6 class="panel-title">Rooms</h6>

                    <div class="panel-tools">
                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addRoomModal">
                            <i class="bi bi-plus-lg"></i> Room
                        </button>
                    </div>
                </div>

                <div id="roomsListContainer">
                    @include('academic-setup.partials._rooms-list')
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tab-pane" id="tab-shifts">
    <div class="setup-card">
        <div id="timeSlotsPanelContainer">
            @include('academic-setup.partials._time-slots-panel')
        </div>
    </div>
</div>

<script>
// Restore the remembered tab inline right after the last tab pane, while
// the page is still being parsed - before the browser paints the markup
// default - so opening the page (or following a deep link such as the
// Dashboard's Needs Attention panel) never flashes the wrong tab first.
(function () {
    // A deep link wins over whatever tab was previously remembered.
    var requested = new URLSearchParams(window.location.search).get('tab');
    var stored = requested || sessionStorage.getItem('academicSetupActiveTab');
    if (!stored) {
        return;
    }
    if (requested) {
        sessionStorage.setItem('academicSetupActiveTab', requested);
    }

    var pane = document.getElementById(stored);
    var link = document.querySelector('.page-nav-link[data-target="' + stored + '"]');
    if (!pane || !link) {
        return;
    }

    document.querySelectorAll('.tab-pane').forEach(function (p) { p.classList.remove('active'); });
    document.querySelectorAll('.page-nav-link').forEach(function (l) { l.classList.remove('active'); });
    pane.classList.add('active');
    link.classList.add('active');
})();
</script>

@include('partials._setup-ui-styles')

@endsection

@section('modals')

<div id="subjectModalsContainer">
    @include('academic-setup.partials._subject-modals')
</div>

<div id="pathwayModalsContainer">
    @include('academic-setup.partials._pathway-modals')
</div>

<div id="sectionModalsContainer">
    @include('academic-setup.partials._section-modals')
</div>

<div id="roomModalsContainer">
    @include('academic-setup.partials._room-modals')
</div>

<div id="timeSlotModalsContainer">
    @include('academic-setup.partials._time-slot-modals')
</div>
@endsection

@push('scripts')
<script>
// Remember the open tab so a return visit (or a deep link) lands where the
// user left off. Saves never reload the page, so this is only needed
// between visits.
const tabLinks = document.querySelectorAll('.page-nav-link');
const tabPanes = document.querySelectorAll('.tab-pane');

tabLinks.forEach(link => {
    link.addEventListener('click', () => {
        tabLinks.forEach(l => l.classList.remove('active'));
        tabPanes.forEach(p => p.classList.remove('active'));

        link.classList.add('active');
        document.getElementById(link.dataset.target).classList.add('active');

        sessionStorage.setItem('academicSetupActiveTab', link.dataset.target);
    });
});

// Edit Timeframe modal: every slot of a shift in one form. Rows are kept in
// real time order - the arrows swap a row with its neighbour and re-time
// both (each keeps its own length), and a row that starts before the one
// above it ends is flagged and blocks saving. Delegated on document
// because a save replaces #timeSlotModalsContainer's innerHTML.
(function () {
    const DEFAULT_MINUTES = 60;

    function toMinutes(value) {
        if (!value) {
            return null;
        }
        const [h, m] = value.split(':').map(Number);
        return h * 60 + m;
    }

    function toTime(minutes) {
        minutes = Math.max(0, Math.min(minutes, 23 * 60 + 59));
        return String(Math.floor(minutes / 60)).padStart(2, '0') + ':' + String(minutes % 60).padStart(2, '0');
    }

    function toLabel(minutes) {
        const h = Math.floor(minutes / 60) % 24;
        return (h % 12 || 12) + ':' + String(minutes % 60).padStart(2, '0') + ' ' + (h < 12 ? 'AM' : 'PM');
    }

    function durationLabel(minutes) {
        const h = Math.floor(minutes / 60);
        const m = minutes % 60;
        return (h ? h + 'h' : '') + (h && m ? ' ' : '') + (m || !h ? m + 'm' : '');
    }

    function field(row, name) {
        return row.querySelector('[data-field="' + name + '"]:not([type="hidden"])')
            || row.querySelector('[data-field="' + name + '"]');
    }

    function rowsOf(form) {
        return Array.from(form.querySelectorAll('[data-tf-list] > [data-tf-row]'));
    }

    // Validates order, updates per-row state, names the inputs by position,
    // and returns whether the whole timeframe can be saved.
    function refresh(form) {
        const rows = rowsOf(form);
        let previousEnd = null;
        let valid = true;
        let first = null;
        let last = null;

        rows.forEach(function (row, index) {
            row.querySelectorAll('[data-field]').forEach(function (input) {
                input.name = 'slots[' + index + '][' + input.dataset.field + ']';
            });

            const start = toMinutes(field(row, 'start_time').value);
            const end = toMinutes(field(row, 'end_time').value);
            let error = '';

            if (start === null || end === null) {
                error = 'Enter both a start and an end time.';
            } else if (end <= start) {
                error = 'End time must be after the start time.';
            } else if (previousEnd !== null && start < previousEnd) {
                error = 'Starts before the slot above ends (' + toLabel(previousEnd) + ').';
            }

            if (error) {
                valid = false;
            }

            const errorEl = row.querySelector('[data-tf-error]');
            errorEl.textContent = error;
            errorEl.hidden = !error;
            row.classList.toggle('is-invalid', !!error);
            row.classList.toggle('is-break', field(row, 'is_break').checked);
            row.classList.toggle('is-inactive', !field(row, 'is_active').checked);

            row.querySelector('[data-tf-duration]').textContent =
                start !== null && end !== null && end > start ? durationLabel(end - start) : '';
            row.querySelector('[data-tf-move="up"]').disabled = index === 0;
            row.querySelector('[data-tf-move="down"]').disabled = index === rows.length - 1;

            if (end !== null) {
                previousEnd = previousEnd === null ? end : Math.max(previousEnd, end);
            }
            if (first === null && start !== null) {
                first = start;
            }
            if (end !== null) {
                last = end;
            }
        });

        form.querySelector('[data-tf-empty]').hidden = rows.length > 0;
        form.querySelector('[data-tf-summary]').textContent = rows.length
            ? rows.length + ' ' + (rows.length === 1 ? 'slot' : 'slots') + (first !== null && last !== null ? ' · ' + toLabel(first) + ' – ' + toLabel(last) : '')
            : 'No slots yet';
        form.querySelector('[type="submit"]').disabled = !valid;

        return valid;
    }

    function flash(row) {
        row.classList.add('is-moved');
        setTimeout(function () { row.classList.remove('is-moved'); }, 600);
    }

    function addRow(form) {
        const rows = rowsOf(form);
        const lastRow = rows[rows.length - 1];
        const lastEnd = lastRow ? toMinutes(field(lastRow, 'end_time').value) : null;

        // Continue from the last slot, with the length of the last class
        // slot (breaks are usually shorter than a period).
        const classRow = rows.slice().reverse().find(function (row) {
            return !field(row, 'is_break').checked && field(row, 'start_time').value && field(row, 'end_time').value;
        });
        const minutes = classRow
            ? toMinutes(field(classRow, 'end_time').value) - toMinutes(field(classRow, 'start_time').value)
            : DEFAULT_MINUTES;

        const row = form.querySelector('[data-tf-template]').content.firstElementChild.cloneNode(true);
        const start = lastEnd !== null ? lastEnd : 7 * 60;
        field(row, 'start_time').value = toTime(start);
        field(row, 'end_time').value = toTime(start + (minutes > 0 ? minutes : DEFAULT_MINUTES));

        form.querySelector('[data-tf-list]').appendChild(row);
        refresh(form);
        flash(row);
        field(row, 'start_time').focus();
    }

    // Swap two neighbouring rows: the lower one takes the upper one's start,
    // each keeps its own length, and any gap between them is preserved, so
    // the slots around the pair never move.
    function swap(upper, lower) {
        const aStart = toMinutes(field(upper, 'start_time').value);
        const aEnd = toMinutes(field(upper, 'end_time').value);
        const bStart = toMinutes(field(lower, 'start_time').value);
        const bEnd = toMinutes(field(lower, 'end_time').value);

        lower.parentNode.insertBefore(lower, upper);

        if ([aStart, aEnd, bStart, bEnd].some(function (v) { return v === null; }) || aEnd <= aStart || bEnd <= bStart) {
            return;
        }

        const gap = Math.max(0, bStart - aEnd);
        const newLowerEnd = aStart + (bEnd - bStart);
        field(lower, 'start_time').value = toTime(aStart);
        field(lower, 'end_time').value = toTime(newLowerEnd);
        field(upper, 'start_time').value = toTime(newLowerEnd + gap);
        field(upper, 'end_time').value = toTime(newLowerEnd + gap + (aEnd - aStart));
    }

    document.addEventListener('click', function (event) {
        const form = event.target.closest('.timeframe-form');
        if (!form) {
            return;
        }

        if (event.target.closest('[data-tf-add]')) {
            addRow(form);
            return;
        }

        const moveBtn = event.target.closest('[data-tf-move]');
        if (moveBtn) {
            const row = moveBtn.closest('[data-tf-row]');
            const up = moveBtn.dataset.tfMove === 'up';
            const neighbour = up ? row.previousElementSibling : row.nextElementSibling;
            if (neighbour) {
                up ? swap(neighbour, row) : swap(row, neighbour);
                refresh(form);
                flash(row);
                (moveBtn.disabled ? row.querySelector('[data-tf-move]:not(:disabled)') : moveBtn)?.focus();
            }
            return;
        }

        const removeBtn = event.target.closest('[data-tf-remove]');
        if (removeBtn) {
            removeBtn.closest('[data-tf-row]').remove();
            refresh(form);
        }
    });

    ['input', 'change'].forEach(function (type) {
        document.addEventListener(type, function (event) {
            const form = event.target.closest('.timeframe-form');
            if (form) {
                refresh(form);
            }
        });
    });

    // Never submit an out-of-order timeframe (capture phase runs before the
    // shared data-ajax submit handler).
    document.addEventListener('submit', function (event) {
        const form = event.target;
        if (form.classList?.contains('timeframe-form') && !refresh(form)) {
            event.preventDefault();
            event.stopImmediatePropagation();
        }
    }, true);

    // Opening starts from the saved timeframe; closing without saving
    // discards the edits.
    const snapshots = new WeakMap();

    document.addEventListener('show.bs.modal', function (event) {
        const form = event.target.querySelector?.('.timeframe-form');
        if (!form) {
            return;
        }
        snapshots.set(form, form.querySelector('[data-tf-list]').innerHTML);
        refresh(form);
    });

    document.addEventListener('hidden.bs.modal', function (event) {
        const form = event.target.querySelector?.('.timeframe-form');
        if (form && snapshots.has(form)) {
            form.querySelector('[data-tf-list]').innerHTML = snapshots.get(form);
            refresh(form);
        }
    });
})();

// "Other Activity" subjects only need a name (spec: no teacher, hours, or
// special room requirement) - toggling the switch hides the fields that
// don't apply and disables them so the browser doesn't block submission on
// a field the user can't see. Delegated on document
// (not bound to the checkbox directly) because an Add/Edit Subject submit
// replaces #subjectModalsContainer's innerHTML, which would otherwise
// destroy a directly-bound listener along with the old modal node.
function applySubjectActivityToggle(checkbox) {
    const form = checkbox.closest('form');
    if (!form) {
        return;
    }

    const isActivity = checkbox.checked;

    form.querySelectorAll('.subject-field-non-activity').forEach(function (field) {
        field.hidden = isActivity;

        // Disabled (not just un-required): an edited activity keeps its
        // stored weekly_hours of 0, which still fails the hidden input's
        // min="0.01" and silently blocks the submit.
        field.querySelectorAll('input, select').forEach(function (input) {
            input.disabled = isActivity;
        });
    });

    const nameLabel = form.querySelector('.subject-name-label');
    if (nameLabel) {
        nameLabel.textContent = isActivity ? 'Activity Name' : 'Subject Name';
    }
}

document.addEventListener('change', function (event) {
    if (event.target.classList.contains('subject-is-activity-toggle')) {
        applySubjectActivityToggle(event.target);
    }
});

// Add Subject: Core subjects belong to every track, so picking Core ticks
// all track checkboxes; Elective clears them for the user to pick manually.
function applyCoreAutoTrack(select) {
    if (select.value !== 'core' && select.value !== 'elective') {
        return;
    }

    const checked = select.value === 'core';

    select.closest('form').querySelectorAll('input[name="pathway_ids[]"]').forEach(function (box) {
        box.checked = checked;
    });
}

document.addEventListener('change', function (event) {
    if (event.target.classList.contains('subject-type-autotrack')) {
        applyCoreAutoTrack(event.target);
    }
});

document.addEventListener('show.bs.modal', function (event) {
    const toggle = event.target.querySelector('.subject-is-activity-toggle');
    if (toggle) {
        applySubjectActivityToggle(toggle);
    }

    // Core is the default option, so the modal opens with it selected.
    const typeSelect = event.target.querySelector('.subject-type-autotrack');
    if (typeSelect) {
        applyCoreAutoTrack(typeSelect);
    }
});

// Subject and section filters (track pills + search box). The controls live
// outside the containers they filter, so they survive each container's
// AJAX-driven refresh; a MutationObserver re-applies the current filter to
// the freshly rendered rows after every such refresh - a save never resets
// what the user was looking at.
function rowMatchesSearch(row, query) {
    return !query || row.textContent.toLowerCase().includes(query);
}

function applySubjectFilters() {
    const filterBar = document.getElementById('subjectTrackFilter');
    if (!filterBar) {
        return;
    }

    const activeBtn = filterBar.querySelector('[data-pathway-filter].active');
    const filterValue = activeBtn ? activeBtn.dataset.pathwayFilter : '';
    const isActivityFilter = filterValue === '__activity__';
    const query = (document.getElementById('subjectSearch')?.value || '').trim().toLowerCase();
    const rows = document.querySelectorAll('#subjectsTableContainer tbody tr[data-row]');

    let anyVisible = false;

    rows.forEach(function (row) {
        const isActivity = row.dataset.isActivity === '1';
        let show;

        if (isActivityFilter) {
            show = isActivity;
        } else if (!filterValue) {
            show = true;
        } else {
            const ids = row.dataset.pathwayIds.split(',').filter(Boolean);
            show = !isActivity && ids.includes(filterValue);
        }

        show = show && rowMatchesSearch(row, query);

        row.hidden = !show;
        if (show) {
            anyVisible = true;
        }
    });

    const emptyMsg = document.getElementById('subjectTrackFilterEmpty');
    if (emptyMsg) {
        if (query) {
            emptyMsg.textContent = 'No subjects match your search.';
        } else if (isActivityFilter) {
            emptyMsg.textContent = 'No activities registered yet.';
        } else {
            emptyMsg.textContent = 'No subjects assigned to this track yet.';
        }
        emptyMsg.hidden = rows.length === 0 || anyVisible || (!filterValue && !query);
    }
}

function applySectionFilters() {
    const query = (document.getElementById('sectionSearch')?.value || '').trim().toLowerCase();
    const rows = document.querySelectorAll('#sectionsTableContainer tbody tr[data-row]');

    let anyVisible = false;

    rows.forEach(function (row) {
        const show = rowMatchesSearch(row, query);
        row.hidden = !show;
        if (show) {
            anyVisible = true;
        }
    });

    const emptyMsg = document.getElementById('sectionsFilterEmpty');
    if (emptyMsg) {
        emptyMsg.hidden = rows.length === 0 || anyVisible;
    }
}

document.addEventListener('click', function (event) {
    const btn = event.target.closest('#subjectTrackFilter [data-pathway-filter]');
    if (!btn) {
        return;
    }

    btn.parentElement.querySelectorAll('[data-pathway-filter]').forEach(function (b) {
        b.classList.remove('active');
    });
    btn.classList.add('active');
    applySubjectFilters();
});

document.addEventListener('input', function (event) {
    if (event.target.id === 'subjectSearch') {
        applySubjectFilters();
    } else if (event.target.id === 'sectionSearch') {
        applySectionFilters();
    }
});

document.addEventListener('DOMContentLoaded', function () {
    const subjectsContainer = document.getElementById('subjectsTableContainer');
    if (subjectsContainer) {
        applySubjectFilters();
        new MutationObserver(applySubjectFilters).observe(subjectsContainer, { childList: true });
    }

    const sectionsContainer = document.getElementById('sectionsTableContainer');
    if (sectionsContainer) {
        applySectionFilters();
        new MutationObserver(applySectionFilters).observe(sectionsContainer, { childList: true });
    }
});
</script>
@endpush