{{ extends "global/Page.html" }}
{{ block title }}Prolific ID{{ endblock }}

{{ block content }}

<link rel="stylesheet" href="{{ static 'hiring-funnel.css' }}">

<p>Please confirm your Prolific PID before continuing.</p>

<div id="prolific-prefill" data-prefill="{{ prefill_prolific_pid }}"></div>

<div style="margin-top: 16px;">
    {{ formfield 'prolific_pid' }}
    <input type="hidden" id="id_prolific_pid_from_url" name="prolific_pid_from_url" value="">
    <input type="hidden" id="id_prolific_study_id" name="prolific_study_id" value="">
    <input type="hidden" id="id_prolific_session_id" name="prolific_session_id" value="">
</div>

<p id="prolific-lock-message" style="display:none; margin-top: 10px; color: #2e7d32; font-size: 0.95em;">
    Detected from your link and locked for payment matching.
</p>

{{ next_button }}

<script>
(function () {
    function pickParam(params, keys) {
        for (const key of keys) {
            const v = params.get(key);
            if (v && String(v).trim()) return String(v).trim();
        }
        return '';
    }

    const params = new URLSearchParams(window.location.search);
    let refParams = null;
    if (document.referrer) {
        try {
            const refUrl = new URL(document.referrer);
            refParams = refUrl.searchParams;
        } catch (e) {
            refParams = null;
        }
    }

    const pidInput = document.getElementById('id_prolific_pid');
    const lockMessage = document.getElementById('prolific-lock-message');
    const prefillNode = document.getElementById('prolific-prefill');
    const pidFromUrlInput = document.getElementById('id_prolific_pid_from_url');
    const studyIdInput = document.getElementById('id_prolific_study_id');
    const sessionIdInput = document.getElementById('id_prolific_session_id');

    if (!pidInput) return;

    let urlPid = pickParam(params, ['PROLIFIC_PID', 'prolific_pid', 'participant_label']);
    let studyId = pickParam(params, ['STUDY_ID', 'study_id']);
    let sessionId = pickParam(params, ['SESSION_ID', 'session_id']);

    // Fallback: oTree /join redirect can strip custom query params from current URL.
    // If so, recover from referrer URL when available.
    if ((!urlPid || !studyId || !sessionId) && refParams) {
        if (!urlPid) urlPid = pickParam(refParams, ['PROLIFIC_PID', 'prolific_pid', 'participant_label']);
        if (!studyId) studyId = pickParam(refParams, ['STUDY_ID', 'study_id']);
        if (!sessionId) sessionId = pickParam(refParams, ['SESSION_ID', 'session_id']);
    }

    if (pidFromUrlInput && urlPid) pidFromUrlInput.value = urlPid;
    if (studyIdInput && studyId) studyIdInput.value = studyId;
    if (sessionIdInput && sessionId) sessionIdInput.value = sessionId;

    const prefill = prefillNode ? (prefillNode.getAttribute('data-prefill') || '').trim() : '';
    if (urlPid && !pidInput.value) {
        pidInput.value = urlPid;
    } else if (prefill && !pidInput.value) {
        pidInput.value = prefill;
    }

    if ((pidInput.value || '').trim()) {
        pidInput.readOnly = true;
        pidInput.style.backgroundColor = '#f5f7fa';
        pidInput.style.color = '#495057';
        pidInput.style.borderColor = '#ced4da';
        pidInput.style.cursor = 'not-allowed';

        if (lockMessage) {
            lockMessage.style.display = 'block';
        }
    }
})();
</script>

{{ endblock }}