@extends('layouts.app')

@php
    $pageTitle = 'Admin Settings';
@endphp

@section('page-nav')
    <button type="button" class="page-nav-link active" data-target="tab-years">School Years</button>
    <button type="button" class="page-nav-link" data-target="tab-terms">School Terms</button>
    <button type="button" class="page-nav-link" data-target="tab-profile">School Profile</button>
    <button type="button" class="page-nav-link" data-target="tab-principals">Principal Account</button>
    <button type="button" class="page-nav-link" data-target="tab-backup">Backup</button>
    <button type="button" class="page-nav-link" data-target="tab-maintenance">Maintenance</button>
@endsection

@section('content')

<div class="setup-meta-bar" id="settingsSummaryContainer">
    @include('admin-settings.partials._summary')
</div>

<div class="tab-pane active" id="tab-years">
    <div class="setup-card">
        <div id="schoolYearsPanelContainer">
            @include('admin-settings.partials._years-panel')
        </div>
    </div>
</div>

<div class="tab-pane" id="tab-terms">
    <div class="setup-card">
        <div id="schoolTermsPanelContainer">
            @include('admin-settings.partials._terms-panel')
        </div>
    </div>
</div>

<div class="tab-pane" id="tab-profile">
    <div class="setup-card">
        <div id="schoolProfilePanelContainer">
            @include('admin-settings.partials._profile-panel')
        </div>
    </div>
</div>

<div class="tab-pane" id="tab-principals">
    <div class="setup-card">
        <div id="principalsPanelContainer">
            @include('admin-settings.partials._principals-panel')
        </div>
    </div>
</div>

<div class="tab-pane" id="tab-backup">
    <div class="setup-card">
        <div id="backupPanelContainer">
            @include('admin-settings.partials._backup-panel')
        </div>
    </div>
</div>

<div class="tab-pane" id="tab-maintenance">
    <div class="setup-card">
        <div id="maintenancePanelContainer">
            @include('admin-settings.partials._maintenance-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 the wrong tab never flashes first.
(function () {
    var stored = sessionStorage.getItem('adminSettingsActiveTab');
    if (!stored) {
        return;
    }

    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="periodModalsContainer">
    @include('admin-settings.partials._period-modals')
</div>

@include('admin-settings.partials._principal-modals')

@endsection

@push('scripts')
<script>
// Remember the open tab so a return visit 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('adminSettingsActiveTab', link.dataset.target);
    });
});

// Principal Account: show the temporary credentials once after create/reset.
(function () {
    const modalEl = document.getElementById('principalCredentialsModal');

    function open(credentials) {
        Object.keys(credentials).forEach(function (key) {
            modalEl.querySelectorAll('[data-cred="' + key + '"]').forEach(function (el) {
                if ('value' in el) {
                    el.value = credentials[key];
                } else {
                    el.textContent = credentials[key];
                }
            });
        });

        bootstrap.Modal.getOrCreateInstance(modalEl).show();
    }

    document.addEventListener('ajax:success', function (event) {
        const credentials = event.detail.data.credentials;
        if (!credentials) {
            return;
        }

        // Wait for the add modal to finish closing before stacking this one.
        const closing = document.querySelector('.modal.show');
        if (!closing) {
            open(credentials);
            return;
        }

        let shown = false;
        const showOnce = function () {
            if (!shown) {
                shown = true;
                open(credentials);
            }
        };
        closing.addEventListener('hidden.bs.modal', showOnce, { once: true });
        setTimeout(showOnce, 700);
    });

    modalEl.querySelectorAll('[data-copy-from]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const value = modalEl.querySelector('[data-cred="' + btn.dataset.copyFrom + '"]').value;
            navigator.clipboard?.writeText(value).then(function () { window.showToast('Copied.', 'success'); });
        });
    });
})();

// Backup restore: every module's data changed, so reload once the toast
// has been seen (or go to login if the restored data no longer has this
// admin account).
document.addEventListener('ajax:success', function (event) {
    const redirect = event.detail.data.redirect;
    if (redirect) {
        setTimeout(function () { window.location.href = redirect; }, 1500);
    }
});

// Add School Year: Fresh/Copy toggle. Delegated on document because every
// year/term save re-renders the modals container, replacing the form.
(function () {
    function sync(modal) {
        const copy = modal.querySelector('input[name="mode"]:checked')?.value === 'copy';
        const section = modal.querySelector('#addYearCopySection');
        const source = modal.querySelector('#addYearCopySource');

        if (!section || !source) {
            return;
        }

        section.hidden = !copy;
        source.disabled = !copy;
        modal.querySelectorAll('[data-copy-terms-for]').forEach(function (block) {
            const on = copy && block.dataset.copyTermsFor === source.value;
            block.hidden = !on;
            block.querySelectorAll('input').forEach(function (input) { input.disabled = !on; });
        });
    }

    document.addEventListener('change', function (event) {
        const modal = event.target.closest('#addSchoolYearModal');
        if (modal) {
            sync(modal);
        }
    });

    document.addEventListener('reset', function (event) {
        const modal = event.target.closest('#addSchoolYearModal');
        if (modal) {
            setTimeout(function () { sync(modal); });
        }
    });
})();
</script>
@endpush