@extends('layouts.app')

@section('title', 'ЕНТ')

@section('content')
<div class="container py-4">
    <h2 class="mb-4">ЕНТ — результаты</h2>

    <div class="ax-card ax-card--muted mb-4">
        <div class="ax-sub-label">Фильтр учеников</div>
        <form method="GET" action="/admin/ent_scores.php" class="row g-2 align-items-end">
            <div class="col-12 col-md-5">
                <label class="form-label small">Поиск по имени</label>
                <input type="text" class="form-control" name="search" value="{{ $search }}">
            </div>
            <div class="col-12 col-md-4">
                <label class="form-label small">Класс</label>
                <select name="class_id" class="form-select">
                    <option value="">Все классы</option>
                    @foreach ($classes as $c)
                        <option value="{{ $c->id }}" @selected((string) $classId === (string) $c->id)>{{ $c->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-12 col-md-3">
                <button type="submit" class="btn btn-outline-primary w-100">Применить</button>
            </div>
        </form>
    </div>

    <div id="entScoresAlert"></div>

    @include('admin.ent_scores._results_card', [
        'search' => $search,
        'classId' => $classId,
        'students' => $students,
        'sections' => $sections,
        'lastProfile' => $lastProfile,
        'detail' => $detail,
        'attempts' => $attempts,
    ])
</div>
@endsection

@push('scripts')
{{--
    Behaviour for the profile-subject slots in _results_card (read its header first — it
    explains the compact/full split this drives).

    Everything is delegated off `document` rather than bound to the controls themselves:
    a successful submit replaces #entScoresCard wholesale (js-ajax-form's
    data-replace-target), so anything bound at load time would be gone afterwards.
    Whatever state doesn't survive that swap — the "все предметы" switch, the two
    list-wide default dropdowns — is re-applied by refresh() below.
--}}
<script>
(function () {
    const MODE_KEY = 'axEntShowAllSections';
    const DEFAULTS_KEY = 'axEntProfileDefaults';

    // localStorage throws outright in some privacy configurations, so nothing here may
    // assume it works — the page has to stay usable without it.
    function readStored(key, fallback) {
        try {
            const raw = localStorage.getItem(key);
            return raw === null ? fallback : JSON.parse(raw);
        } catch (e) {
            return fallback;
        }
    }

    function writeStored(key, value) {
        try {
            localStorage.setItem(key, JSON.stringify(value));
        } catch (e) {
            /* not worth surfacing: it only costs the user the remembered choice */
        }
    }

    function scoreBoxFor(select) {
        return select.closest('.js-ent-profile-slot').querySelector('.js-ent-profile-score');
    }

    /**
     * Point a slot's score box at the subject its dropdown now names. The box's own
     * `name` is what the server records the score against, so it has to be rewritten
     * on every change; with no subject picked the box is disabled and posts nothing.
     *
     * A typed score is deliberately kept across a subject change — that change is
     * almost always "I picked the wrong subject for this number", not "this number is
     * wrong too", and re-typing it would be the annoying half of that.
     */
    function syncSlot(select) {
        const box = scoreBoxFor(select);
        const option = select.selectedOptions[0];

        if (!select.value) {
            box.removeAttribute('name');
            box.removeAttribute('max');
            box.placeholder = '';
            box.disabled = true;
            return;
        }

        box.name = 'scores[' + select.dataset.student + '][' + select.value + ']';
        box.max = option.dataset.max;
        box.placeholder = '0–' + String(option.dataset.max).replace(/\.0$/, '');
        box.disabled = false;
    }

    /** Grey out the subject a row's other slot already took, so it can't be picked twice. */
    function syncRow(row) {
        const selects = Array.from(row.querySelectorAll('.js-ent-profile-select'));
        const taken = selects.map(s => s.value).filter(Boolean);

        selects.forEach(function (select) {
            Array.from(select.options).forEach(function (option) {
                option.disabled = option.value !== '' && option.value !== select.value && taken.includes(option.value);
            });
        });
    }

    /**
     * Show one table and disable every input in the other, so the two never post the
     * same score twice under the same name.
     */
    function setMode(showAll) {
        const compact = document.getElementById('entCompactTable');
        const full = document.getElementById('entFullTable');
        if (!compact || !full) return;

        compact.classList.toggle('d-none', showAll);
        full.classList.toggle('d-none', !showAll);
        document.getElementById('entProfileDefaults')?.classList.toggle('d-none', showAll);

        full.querySelectorAll('input').forEach(function (input) {
            input.disabled = !showAll;
        });
        compact.querySelectorAll('.js-ent-profile-select').forEach(function (select) {
            select.disabled = showAll;
        });
        compact.querySelectorAll('input').forEach(function (input) {
            // A profile score box also stays disabled while its slot has no subject —
            // showing the compact table doesn't by itself make it postable.
            input.disabled = showAll || (input.classList.contains('js-ent-profile-score') && !input.name);
        });
    }

    /** Push the two list-wide defaults onto every slot, optionally leaving filled ones alone. */
    function applyDefaults(onlyEmpty) {
        const values = document.querySelectorAll('.js-ent-default-profile');

        document.querySelectorAll('#entCompactTable tbody tr').forEach(function (row) {
            row.querySelectorAll('.js-ent-profile-select').forEach(function (select) {
                const wanted = values[Number(select.dataset.slot)]?.value || '';
                if (!wanted || (onlyEmpty && select.value)) return;
                // Skip a subject the row's other slot already holds: assigning it here
                // would silently drop that slot's score instead of adding one.
                if (Array.from(row.querySelectorAll('.js-ent-profile-select')).some(o => o !== select && o.value === wanted)) return;

                select.value = wanted;
                syncSlot(select);
            });
            syncRow(row);
        });

        // syncSlot() enables the score boxes it just named, which would smuggle the
        // compact table's inputs back into a submission made from the full matrix —
        // re-assert the mode over the top of it.
        setMode(document.getElementById('entShowAllSections')?.checked === true);
    }

    /** Re-establish everything that a #entScoresCard re-render just wiped. */
    function refresh() {
        const stored = readStored(DEFAULTS_KEY, []);
        document.querySelectorAll('.js-ent-default-profile').forEach(function (select, i) {
            if (Array.from(select.options).some(o => o.value === stored[i])) {
                select.value = stored[i];
            }
        });

        const toggle = document.getElementById('entShowAllSections');
        if (toggle) toggle.checked = readStored(MODE_KEY, false) === true;

        document.querySelectorAll('#entCompactTable tbody tr').forEach(syncRow);
        applyDefaults(true);
    }

    document.addEventListener('change', function (e) {
        if (e.target.classList.contains('js-ent-profile-select')) {
            syncSlot(e.target);
            syncRow(e.target.closest('tr'));
            return;
        }

        if (e.target.classList.contains('js-ent-default-profile')) {
            writeStored(DEFAULTS_KEY, Array.from(document.querySelectorAll('.js-ent-default-profile')).map(s => s.value));
            return;
        }

        if (e.target.id === 'entShowAllSections') {
            writeStored(MODE_KEY, e.target.checked);
            setMode(e.target.checked);
        }
    });

    /**
     * Fill the one shared edit dialog from the sitting whose pencil was clicked —
     * see _results_card's comment on why there's one dialog and not one per row.
     *
     * Every subject field is written on every open, blanks included: the dialog is
     * reused, so a field left over from the previous sitting would otherwise be
     * submitted as this one's score.
     */
    function fillEditDialog(button) {
        // The dialog is reused, so a rejection from the last sitting edited would
        // otherwise still be sitting at the top of it.
        document.getElementById('entEditAlert').innerHTML = '';

        document.getElementById('entEditStudentId').value = button.dataset.student;
        document.getElementById('entEditStudentName').textContent = button.dataset.studentName;
        // Both dates: test_date is what the sitting becomes, original_date is what it
        // is now, and the server needs the latter to find the rows to move.
        document.getElementById('entEditOriginalDate').value = button.dataset.date;
        document.getElementById('entEditDate').value = button.dataset.date;
        document.getElementById('entEditNote').value = button.dataset.note || '';

        let scores = {};
        try {
            scores = JSON.parse(button.dataset.scores || '{}');
        } catch (err) {
            // Leaves every field blank rather than half-filled — saving that would
            // wipe the sitting's other subjects, so blank is the safe failure.
            scores = {};
        }

        document.querySelectorAll('.js-ent-edit-score').forEach(function (input) {
            const score = scores[input.dataset.section];
            input.value = score === undefined ? '' : score;
        });

        // Pre-021 rows have no subject and so no field here; they're kept as they are
        // (update() re-dates them with the rest), which is only honest if the dialog
        // says why its fields don't add up to the total shown in the table.
        const unassigned = button.dataset.unassigned;
        const warning = document.getElementById('entEditUnassigned');
        warning.classList.toggle('d-none', !unassigned);
        if (unassigned) {
            warning.textContent = 'В этом результате есть ' + unassigned + ' балл(ов), записанных без предмета (старая запись). Изменить их здесь нельзя — они сохранятся как есть и войдут в сумму.';
        }
    }

    document.addEventListener('click', function (e) {
        if (e.target.closest('#entApplyProfiles')) {
            // Overwrites filled slots too: this is an explicit "everyone sits these two"
            // click, unlike the load-time pass, which must not clobber preselections.
            applyDefaults(false);
            return;
        }

        const toggle = e.target.closest('.js-ent-toggle-attempts');
        if (toggle) {
            document.querySelector(toggle.dataset.target)?.classList.toggle('d-none');
            toggle.querySelector('i')?.classList.toggle('bi-chevron-down');
            toggle.querySelector('i')?.classList.toggle('bi-chevron-up');
            return;
        }

        // Bootstrap opens the dialog off the same click (data-bs-toggle on the button);
        // this only fills it, and both listeners sit on document, so the order between
        // them doesn't matter — the fields are written before the animation ends either
        // way.
        const edit = e.target.closest('.js-ent-edit');
        if (edit) {
            fillEditDialog(edit);
        }
    });

    // js-ajax-form fires this *before* it swaps in the new card (so page-specific
    // listeners can still read the old DOM), hence the deferral — refresh() has to run
    // against the replacement, not the markup it's about to discard.
    document.addEventListener('ajax-form:success', function (e) {
        if (!e.target.closest('#entScoresCard')) {
            return;
        }

        // The edit dialog reports into itself (see its data-alert-target and the
        // comment above it), which is right for a rejection and useless for a
        // success — the dialog is on its way out. Echo the confirmation onto the
        // page it closes back to, with the same auto-clear the shared handler uses.
        if (e.target.closest('#entEditModal')) {
            const box = document.getElementById('entScoresAlert');
            box.innerHTML = '<div class="alert alert-success py-2">' + (e.detail.message || '') + '</div>';
            setTimeout(function () { box.innerHTML = ''; }, 3000);
        }

        setTimeout(refresh, 0);
    });

    document.addEventListener('DOMContentLoaded', refresh);
})();
</script>
@endpush