@php($emailModalUser = $emailModalUser ?? Auth::user())

<div class="modal fade" id="emailChangeModal" tabindex="-1" aria-labelledby="emailChangeModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form id="emailChangeForm" novalidate>
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="emailChangeModalTitle">{{ __('public.profile.change_email_title') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('public.profile.cancel') }}"></button>
                </div>
                <div class="modal-body">
                    <p class="text-body-secondary fs-sm">{{ __('public.profile.change_email_intro') }}</p>
                    <div class="alert alert-success d-none" role="alert" id="emailChangeSuccess"></div>
                    <div class="alert alert-danger d-none" role="alert" id="emailChangeError"></div>
                    <div class="mb-2">
                        <label class="form-label" for="emailChangeNew">{{ __('public.profile.email') }}</label>
                        <input
                            type="email"
                            id="emailChangeCurrent"
                            class="form-control mb-2"
                            value="{{ $emailModalUser?->email }}"
                            disabled
                        >
                        <label class="form-label" for="emailChangeNew">{{ __('public.profile.change_email_new_label') }}</label>
                        <input
                            type="email"
                            id="emailChangeNew"
                            name="email"
                            class="form-control"
                            autocomplete="email"
                            required
                        >
                        <div class="invalid-feedback" id="emailChangeFieldError"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-hero-outline btn-hero-sm" data-bs-dismiss="modal">{{ __('public.profile.cancel') }}</button>
                    <button type="submit" class="btn btn-hero btn-hero-sm" id="emailChangeSubmit">
                        {{ __('public.profile.change_email_send_link') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var modalEl = document.getElementById('emailChangeModal');
        if (!modalEl) return;

        var form = document.getElementById('emailChangeForm');
        var input = document.getElementById('emailChangeNew');
        var fieldErr = document.getElementById('emailChangeFieldError');
        var alertOk = document.getElementById('emailChangeSuccess');
        var alertErr = document.getElementById('emailChangeError');
        var submitBtn = document.getElementById('emailChangeSubmit');
        var currentInput = document.getElementById('emailChangeCurrent');

        var i18n = {
            sending: @json(__('public.profile.change_email_sending')),
            sendLink: @json(__('public.profile.change_email_send_link')),
            sent: @json(__('public.profile.change_email_sent')),
            failed: @json(__('public.profile.change_email_failed')),
            same: @json(__('public.profile.change_email_same')),
            newLabel: @json(__('public.profile.change_email_new_label')),
        };

        function resetState() {
            input.classList.remove('is-invalid');
            fieldErr.textContent = '';
            alertOk.classList.add('d-none');
            alertOk.textContent = '';
            alertErr.classList.add('d-none');
            alertErr.textContent = '';
        }

        modalEl.addEventListener('hidden.bs.modal', function () {
            resetState();
            input.value = '';
            submitBtn.disabled = false;
            submitBtn.textContent = i18n.sendLink;
        });

        form.addEventListener('submit', async function (event) {
            event.preventDefault();
            resetState();

            var newEmail = (input.value || '').trim().toLowerCase();
            var currentEmail = (currentInput && currentInput.value ? currentInput.value : '').trim().toLowerCase();

            if (!newEmail) {
                input.classList.add('is-invalid');
                fieldErr.textContent = i18n.newLabel;
                return;
            }
            if (newEmail === currentEmail) {
                input.classList.add('is-invalid');
                fieldErr.textContent = i18n.same;
                return;
            }

            submitBtn.disabled = true;
            submitBtn.textContent = i18n.sending;

            try {
                var token = (document.querySelector('meta[name="csrf-token"]') || {}).content || @json(csrf_token());
                var res = await fetch('/profile/activation/email', {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': token,
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify({ email: newEmail })
                });

                var json = null;
                try { json = await res.json(); } catch (_e) {}

                if (res.status === 422 && json && json.errors && json.errors.email && json.errors.email[0]) {
                    input.classList.add('is-invalid');
                    fieldErr.textContent = json.errors.email[0];
                    submitBtn.disabled = false;
                    submitBtn.textContent = i18n.sendLink;
                    return;
                }

                if (!res.ok || !json || json.success !== true) {
                    alertErr.textContent = (json && json.message) ? json.message : i18n.failed;
                    alertErr.classList.remove('d-none');
                    submitBtn.disabled = false;
                    submitBtn.textContent = i18n.sendLink;
                    return;
                }

                alertOk.textContent = i18n.sent.replace(':email', newEmail);
                alertOk.classList.remove('d-none');
                input.value = '';
                submitBtn.disabled = false;
                submitBtn.textContent = i18n.sendLink;
            } catch (e) {
                alertErr.textContent = e.message || i18n.failed;
                alertErr.classList.remove('d-none');
                submitBtn.disabled = false;
                submitBtn.textContent = i18n.sendLink;
            }
        });
    });
</script>