{{--
    Reusable "Request More Info" modal — the request-info twin of
    rejection-modal.blade.php. Pops up before the startup's action is set
    to the request-info option, so the admin can type the questions to
    send the startup. Reuses the shared `.rj-modal__*` CSS (loaded by the
    rejection modal partial, included on the same page) and adds a blue
    `--info` color modifier so it reads as a request, not a rejection.

    JS usage:
        window.openRequestInfoModal({
            subjectName:   '...',
            currentAction: '...',         // optional, shown as muted line
            statusName:    'Request More Info',
            onSubmit: (text) => {...},    // text is always a string
            onCancel: () => {...},
        });

    Include ONCE per page, AFTER the rejection modal (for the shared CSS).
--}}
<div id="request-info-modal"
     class="rj-modal rj-modal--info"
     role="dialog"
     aria-modal="true"
     aria-labelledby="request-info-modal-title"
     data-open="false">
    <div class="rj-modal__backdrop" data-ri-backdrop></div>
    <div class="rj-modal__card" role="document">
        <div class="rj-modal__head">
            <span class="rj-modal__icon" aria-hidden="true">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"/>
                    <line x1="12" y1="16" x2="12" y2="12"/>
                    <line x1="12" y1="8" x2="12.01" y2="8"/>
                </svg>
            </span>
            <div class="rj-modal__head-text">
                <h3 id="request-info-modal-title">{{ __('admin.request_info_modal.title') }}</h3>
                <p class="rj-modal__subtitle">{{ __('admin.request_info_modal.subtitle') }}</p>
            </div>
        </div>

        <div class="rj-modal__body">
            <dl class="rj-modal__summary">
                <div class="rj-modal__summary-row">
                    <dt>{{ __('admin.request_info_modal.subject') }}</dt>
                    <dd data-ri-subject>—</dd>
                </div>
                <div class="rj-modal__summary-row" data-ri-current-row hidden>
                    <dt>{{ __('admin.request_info_modal.current_action') }}</dt>
                    <dd data-ri-current>—</dd>
                </div>
                <div class="rj-modal__summary-row">
                    <dt>{{ __('admin.request_info_modal.new_status') }}</dt>
                    <dd>
                        <span class="rj-modal__status-pill" data-ri-status>—</span>
                    </dd>
                </div>
            </dl>

            <label class="rj-modal__field">
                <span class="rj-modal__field-label">
                    {{ __('admin.request_info_modal.questions_label') }}
                </span>
                <textarea data-ri-text
                          rows="5"
                          maxlength="5000"
                          placeholder="{{ __('admin.request_info_modal.questions_placeholder') }}"></textarea>
            </label>
        </div>

        <div class="rj-modal__actions">
            <button type="button" class="rj-modal__btn rj-modal__btn--ghost" data-ri-cancel>
                {{ __('admin.request_info_modal.cancel') }}
            </button>
            <button type="button" class="rj-modal__btn rj-modal__btn--primary" data-ri-submit>
                {{ __('admin.request_info_modal.submit') }}
            </button>
        </div>
    </div>
</div>

<style>
    /* Blue "request" palette — overrides the red rejection defaults. */
    .rj-modal--info .rj-modal__icon       { background: #dbeafe; color: #1d4ed8; }
    .rj-modal--info .rj-modal__status-pill{ background: #dbeafe; color: #1d4ed8; }
    .rj-modal--info .rj-modal__btn--primary {
        background: #2563eb;
        box-shadow: 0 1px 2px rgba(37, 99, 235, .25), 0 4px 10px -3px rgba(37, 99, 235, .35);
    }
    .rj-modal--info .rj-modal__btn--primary:hover { background: #1d4ed8; }
</style>

<script>
(() => {
    if (window.__requestInfoModalReady) return;
    window.__requestInfoModalReady = true;

    const modal = document.getElementById('request-info-modal');
    if (!modal) return;

    const subjectEl  = modal.querySelector('[data-ri-subject]');
    const currentRow = modal.querySelector('[data-ri-current-row]');
    const currentEl  = modal.querySelector('[data-ri-current]');
    const statusEl   = modal.querySelector('[data-ri-status]');
    const textEl     = modal.querySelector('[data-ri-text]');
    const submitBtn  = modal.querySelector('[data-ri-submit]');
    const cancelBtn  = modal.querySelector('[data-ri-cancel]');
    const backdrop   = modal.querySelector('[data-ri-backdrop]');

    let onSubmit = null;
    let onCancel = null;
    let isOpen   = false;

    function open(opts) {
        subjectEl.textContent = (opts.subjectName || '').trim() || '—';
        if (opts.currentAction) {
            currentEl.textContent = String(opts.currentAction);
            currentRow.removeAttribute('hidden');
        } else {
            currentRow.setAttribute('hidden', '');
        }
        statusEl.textContent = (opts.statusName || @json(__('admin.request_info_modal.default_status'))).trim();
        textEl.value = '';
        onSubmit = typeof opts.onSubmit === 'function' ? opts.onSubmit : null;
        onCancel = typeof opts.onCancel === 'function' ? opts.onCancel : null;
        submitBtn.disabled = false;
        modal.dataset.open = 'true';
        isOpen = true;
        setTimeout(() => textEl.focus(), 0);
    }

    function close(cancelled) {
        if (!isOpen) return;
        isOpen = false;
        modal.dataset.open = 'false';
        if (cancelled && onCancel) onCancel();
        onSubmit = null; onCancel = null;
    }

    function submit() {
        if (!isOpen || submitBtn.disabled) return;
        const text = (textEl.value || '').trim();
        submitBtn.disabled = true;
        const cb = onSubmit;
        modal.dataset.open = 'false';
        isOpen = false;
        onSubmit = null; onCancel = null;
        if (cb) cb(text);
    }

    submitBtn.addEventListener('click', submit);
    cancelBtn.addEventListener('click', () => close(true));
    backdrop.addEventListener('click',  () => close(true));
    document.addEventListener('keydown', (e) => {
        if (!isOpen) return;
        if (e.key === 'Escape') { e.preventDefault(); close(true); }
        if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); submit(); }
    });

    window.openRequestInfoModal = open;
})();
</script>