{{ extends 'global/Page.html' }}
{{ block title }}Prize Draw{{ endblock }}

{{ block content }}

<style>
    body { background-color: #f4f6f8 !important; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
    .page-header, .otree-btn-next { display: none !important; }

    .draw-container {
        max-width: 680px;
        margin: 40px auto;
        background-color: #ffffff;
        padding: 40px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        line-height: 1.75;
        font-size: 1rem;
    }

    .draw-title {
        font-size: 1.5rem;
        text-align: center;
        margin-bottom: 6px;
        font-weight: bold;
        color: #2c3e50;
    }
    .draw-subtitle {
        text-align: center;
        color: #777;
        font-size: 0.95rem;
        margin-bottom: 28px;
        padding-bottom: 18px;
        border-bottom: 2px solid #e9ecef;
    }

    .ticket-summary {
        background: #f0f7f0;
        border: 1px solid #c3e6cb;
        border-left: 5px solid #28a745;
        padding: 18px 20px;
        border-radius: 4px;
        margin-bottom: 28px;
    }
    .ticket-row {
        display: flex;
        justify-content: space-between;
        padding: 6px 0;
        font-size: 1.05rem;
    }
    .ticket-value { color: #28a745; font-weight: bold; }

    .draw-section { margin-bottom: 24px; }
    .draw-section-title {
        font-weight: bold;
        color: #2c3e50;
        font-size: 1.05rem;
        margin-bottom: 10px;
    }

    .draw-info {
        background: #e8f4f8;
        border-left: 5px solid #17a2b8;
        padding: 14px 18px;
        margin-bottom: 24px;
        border-radius: 4px;
        font-size: 0.95rem;
        color: #2c3e50;
    }

    .radio-option {
        display: block;
        margin-bottom: 10px;
        font-size: 1.05rem;
        cursor: pointer;
    }
    .radio-option input[type="radio"] {
        transform: scale(1.2);
        margin-right: 10px;
        cursor: pointer;
        accent-color: #007bff;
    }

    #email-section {
        display: none;
        margin-top: 18px;
        padding: 20px;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 6px;
    }

    .email-label {
        font-weight: bold;
        font-size: 1.05rem;
        display: block;
        margin-bottom: 10px;
        color: #333;
    }
    .email-input {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 1rem;
        box-sizing: border-box;
        font-family: inherit;
        margin-bottom: 14px;
    }

    .consent-check-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        margin-bottom: 10px;
    }
    .consent-check-wrapper input[type="checkbox"] {
        margin-top: 3px;
        transform: scale(1.3);
        accent-color: #28a745;
        cursor: pointer;
        flex-shrink: 0;
    }
    .consent-check-wrapper label {
        cursor: pointer;
        font-size: 0.92rem;
        color: #444;
        line-height: 1.6;
    }

    .btn-finish {
        display: block;
        width: 100%;
        max-width: 400px;
        margin: 30px auto 0;
        background: #28a745;
        color: #ffffff;
        border: none;
        padding: 15px;
        font-size: 1.15rem;
        font-weight: bold;
        cursor: pointer;
        border-radius: 4px;
        transition: background 0.2s;
    }
    .btn-finish:hover:not(:disabled) { background: #218838; }
    .btn-finish:disabled { background: #cccccc; cursor: not-allowed; }
</style>

<div class="draw-container">

    <!-- ═══ MAIN FORM ═══ -->
    <div id="draw-form">
        <div class="draw-title">Prize Draw</div>
        <div class="draw-subtitle">You have completed the experiment. Thank you for your participation!</div>

        <div class="ticket-summary">
            <div class="ticket-row">
                <span>Task 1 — Lottery Tickets</span>
                <span class="ticket-value">{{ task1_tickets }}</span>
            </div>
            <div class="ticket-row">
                <span>Task 2 — Lottery Tickets</span>
                <span class="ticket-value">{{ task2_tickets }}</span>
            </div>
        </div>

        <div class="draw-info">
            Two separate prize draws of <strong>€5 each</strong> will be conducted — one for each task.
            Your lottery tickets from each task are entered into their respective draws independently.
            Winners will be contacted by email after data collection is complete.
        </div>

        <div class="draw-section">
            <div class="draw-section-title">Would you like to enter the prize draws?</div>
            <label class="radio-option">
                <input type="radio" name="_ui_draw" value="Yes" id="draw-yes"> Yes, I would like to enter
            </label>
            <label class="radio-option">
                <input type="radio" name="_ui_draw" value="No" id="draw-no"> No, thank you
            </label>
        </div>

        <div id="email-section">
            <label class="email-label">Your email address:</label>
            <input type="email" id="ui-email" class="email-input" placeholder="your.email@example.com">

            <div class="consent-check-wrapper">
                <input type="checkbox" id="ui-consent">
                <label for="ui-consent">
                    I consent to the processing of my email address solely for the purpose of the
                    prize draw. I understand that my email is stored separately from my research data,
                    cannot be linked to my experimental responses, and will be deleted after the draw
                    is completed [GDPR Art. 5(1)(b), Art. 6(1)(a)].
                </label>
            </div>
        </div>

        <div id="form-error" style="color: #dc3545; text-align: center; font-size: 0.95rem; margin-top: 15px; display: none;"></div>

        <div style="margin-top: 28px; padding: 18px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 4px; text-align: center;">
            <strong style="color: #2c3e50;">SurveyCircle Participants:</strong><br>
            <span style="color: #555; font-size: 0.95rem;">Redeem Survey Code with one click:</span><br>
            <a href="https://www.surveycircle.com/Z1RY-Y7ZX-GQEE-RM1G/" target="_blank"
               style="color: #007bff; font-weight: bold; font-size: 1.05rem; word-break: break-all;">
                https://www.surveycircle.com/Z1RY-Y7ZX-GQEE-RM1G/
            </a>
        </div>

        <button type="button" class="btn-finish" id="btn-finish" onclick="submitDraw()">
            FINISH EXPERIMENT
        </button>
    </div>
</div>

<!-- oTree hidden fields — these are the ONLY inputs with oTree field names -->
<input type="hidden" name="enter_draw" id="in_enter_draw" value="No">
<input type="hidden" name="lottery_email" id="in_email" value="">
<input type="hidden" name="email_consent" id="in_consent" value="False">
<div style="display: none;">
    {{ formfield_errors 'enter_draw' }}
    {{ formfield_errors 'lottery_email' }}
    {{ formfield_errors 'email_consent' }}
</div>

<script>
    var drawYes = document.getElementById('draw-yes');
    var drawNo = document.getElementById('draw-no');
    var emailSection = document.getElementById('email-section');
    var emailInput = document.getElementById('ui-email');
    var emailConsent = document.getElementById('ui-consent');
    var errorDiv = document.getElementById('form-error');

    drawYes.addEventListener('change', function() {
        if (this.checked) emailSection.style.display = 'block';
    });

    drawNo.addEventListener('change', function() {
        if (this.checked) {
            emailSection.style.display = 'none';
            emailInput.value = '';
            emailConsent.checked = false;
        }
    });

    function submitDraw() {
        errorDiv.style.display = 'none';

        var chosen = document.querySelector('input[name="_ui_draw"]:checked');
        if (!chosen) {
            errorDiv.textContent = 'Please select whether you would like to enter the prize draw.';
            errorDiv.style.display = 'block';
            return;
        }

        if (chosen.value === 'Yes') {
            if (!emailInput.value || !emailInput.value.includes('@')) {
                errorDiv.textContent = 'Please enter a valid email address.';
                errorDiv.style.display = 'block';
                return;
            }
            if (!emailConsent.checked) {
                errorDiv.textContent = 'Please check the consent box to proceed with the prize draw.';
                errorDiv.style.display = 'block';
                return;
            }
            document.getElementById('in_enter_draw').value = 'Yes';
            document.getElementById('in_email').value = emailInput.value;
            document.getElementById('in_consent').value = 'True';
        } else {
            document.getElementById('in_enter_draw').value = 'No';
            document.getElementById('in_email').value = '';
            document.getElementById('in_consent').value = 'False';
        }

        document.getElementById('btn-finish').disabled = true;
        document.getElementById('btn-finish').textContent = 'Submitting...';
        document.forms[0].submit();
    }
</script>

{{ endblock }}