{{--
    Содержимое блока за кнопкой: в блоке кнопка, содержимое — поверх страницы.

    Один шаблон на все такие блоки: и форма обратной связи, и вход покупателя
    прячутся одинаково, и расходиться их поведению незачем.

    Окно — нативный <dialog>, а не свой слой на div'ах: он сам закрывается
    по Esc, сам держит фокус внутри и сам не даёт кликнуть по странице позади.
    Скрипт нужен ровно для открытия и закрытия.

    ⚠️ Содержимое лежит в разметке СРАЗУ, окно его только прячет. Подгружать
    запросом значило бы, что при отключённом скрипте ни заявку не отправить,
    ни войти.

    Идентификатор берётся от блока: один и тот же блок может стоять и в шапке,
    и в подвале, и два окна с общим id открывались бы вместе.

    Ожидает: $block, $label (подпись кнопки), $title, $html, $openNow.
--}}
@php($id = 'kz-modal-'.$block->id)

<div class="kz-modal">
    <button type="button" class="kz-button kz-modal__open" data-kz-modal-open="{{ $id }}">
        {{ $label }}
    </button>

    <dialog id="{{ $id }}" class="kz-modal__dialog" @if ($openNow ?? false) data-kz-modal-now @endif>
        <button type="button" class="kz-modal__close" data-kz-modal-close aria-label="Закрыть">×</button>

        @if (($title ?? '') !== '')
            <h2 class="kz-modal__title">{{ $title }}</h2>
        @endif

        {!! $html !!}
    </dialog>
</div>

<script>
    (function () {
        var dialog = document.getElementById(@json($id));

        if (!dialog) return;

        document.querySelectorAll('[data-kz-modal-open="' + dialog.id + '"]').forEach(function (button) {
            button.addEventListener('click', function () { dialog.showModal(); });
        });

        dialog.querySelectorAll('[data-kz-modal-close]').forEach(function (button) {
            button.addEventListener('click', function () { dialog.close(); });
        });

        // Клик по подложке закрывает окно: в <dialog> подложка — это сам
        // элемент, а его содержимое лежит внутри, поэтому проверяется цель.
        dialog.addEventListener('click', function (event) {
            if (event.target === dialog) dialog.close();
        });

        // Окно открывается само, когда внутри есть что показать прямо сейчас:
        // сообщение об отправленной заявке, шаг ввода кода, ошибка поля.
        // Иначе результат действия остался бы за закрытой дверью.
        if (dialog.hasAttribute('data-kz-modal-now')) dialog.showModal();
    })();
</script>