{% extends "global/Page.html" %}
{% load otree %}

{% block content %}
    <h3 style="text-align: right; direction: rtl;">טופס הצהרה וחתימה</h3>

    <div style="text-align: right; font-size: 20px; direction: rtl;">
        <p>הנני מצהיר/ה כי השתתפתי כנבדק במחקרו של החוקר {{ Constants.RESEARCHER_NAME }}.</p>
        <p>עבור השתתפותי כנבדק במחקר קיבלתי:</p>
        <p><b>תשלום בסך {{ payment_amount_display }} ש"ח.</b></p>
    </div>

    <hr>

    <div style="text-align: right; font-size: 20px; direction: rtl; margin: 20px 0;">
        <div style="margin-bottom: 15px;">
            <label for="id_participant_full_name" style="display: block; font-weight: bold; margin-bottom: 5px;">שם מלא:</label>
            <input type="text" name="participant_full_name" id="id_participant_full_name"
                   style="width: 300px; padding: 5px; direction: rtl; text-align: right;"
                   maxlength="100" required>
        </div>

        <div style="margin-bottom: 15px; font-size: 20px;">
            <label for="id_phone_number" style="display: block; font-weight: bold; margin-bottom: 5px;">מספר טלפון לקבלת תשלום (יועבר בביט):</label>
            <input type="text" name="phone_number" id="id_phone_number"
                   value="{{ player.phone_number}}"
                  style="width: 300px; padding: 5px; direction: rtl; text-align: right;"
                 maxlength="15" required>
        </div>

        <div style="margin-bottom: 15px; font-size: 20px;">
            <label for="id_participant_id_number" style="display: block; font-weight: bold; margin-bottom: 5px;">ת.ז.:</label>
            <input type="text" name="participant_id_number" id="id_participant_id_number"
                   style="width: 300px; padding: 5px; direction: rtl; text-align: right;"
                   maxlength="20" required>
        </div>
    </div>

    <div style="text-align: right; direction: rtl; margin: 20px 0; font-size: 20px;">
        <label style="display: block; font-weight: bold; margin-bottom: 10px;">הנני מצהיר/ה כי בשנת המס הנוכחית:</label>

        <div style="margin-bottom: 10px; font-size: 20px;" >
            <input type="radio" name="previous_payment_choice" value="1" id="choice1" style="margin-left: 10px;">
            <label for="choice1">קבלתי גמול מסוג זה בסך ________ ש"ח</label>
        </div>

        <div style="margin-bottom: 15px; font-size: 20px;">
            <input type="radio" name="previous_payment_choice" value="2" id="choice2" style="margin-left: 10px;">
            <label for="choice2">לא קבלתי גמול מסוג זה בגין השתתפות במחקר זה או אחר באוניברסיטה.</label>
        </div>

        <div id="previousPaymentAmountDiv" style="display: none; font-size: 20px; margin-right: 20px; margin-bottom: 15px;">
            <label for="id_previous_payment_amount" style="display: block; font-weight: bold; margin-bottom: 5px;">סכום גמול קודם (ש"ח):</label>
            <input type="number" name="previous_payment_amount" id="id_previous_payment_amount"
                   style="width: 150px; padding: 5px; direction: rtl; text-align: right;"
                   step="0.01" min="0">
        </div>
    </div>

    <div style="text-align: right; direction: rtl; font-size: 20px; margin: 20px 0;">
        <p>ידוע לי כי קבלת גמול זה בגין השתתפותי במחקר אין משמעותה קיום יחסי עובד - מעביד ולא תהיה לי כל תביעה בהקשר זה.</p>
    </div>

    <hr>

    <p style="text-align: right; font-size: 20px; direction: rtl;">אנא חתום/חתמי בתיבה למטה. לאחר החתימה, לחץ/י על "שמור חתימה" ולאחר מכן על "הבא" כדי להמשיך.</p>
    <p style="text-align: right; font-size: 20px; direction: rtl;">אם נעשתה טעות בהזנת הנתונים יש לתקן אותם, ולחכות מספר שניות עד שכפתור "הבא" יהפוך לזמין שוב.</p>

    <div style="border: 2px solid black; background-color: white; width: 500px; height: 200px; margin: 10px 0; position: relative;">
        <canvas id="signatureCanvas" width="500" height="200" style="cursor: crosshair; display: block;"></canvas>
        <button type="button" id="clearSignature" class="btn btn-warning btn-sm" style="position: absolute; top: 5px; left: 5px;">נקה חתימה</button>
    </div>

    <button type="button" id="saveSignature" class="btn btn-primary">שמור חתימה</button>
    <span id="saveStatus" style="margin-left: 10px; color: green; font-weight: bold;"></span>

    <br><br>

    <!-- Hidden input field for signature -->
    <input type="hidden" name="signature_base64" id="id_signature_base64" value="">

    {% next_button %}

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Canvas signature functionality
            var canvas = document.getElementById('signatureCanvas');
            var ctx = canvas.getContext('2d');
            var isDrawing = false;
            var hasSignature = false;

            // Set up canvas drawing properties
            ctx.strokeStyle = '#000000';
            ctx.lineWidth = 2;
            ctx.lineCap = 'round';
            ctx.lineJoin = 'round';

            // Mouse events
            canvas.addEventListener('mousedown', function(e) {
                isDrawing = true;
                hasSignature = true;
                var rect = canvas.getBoundingClientRect();
                var x = e.clientX - rect.left;
                var y = e.clientY - rect.top;
                ctx.beginPath();
                ctx.moveTo(x, y);
            });

            canvas.addEventListener('mousemove', function(e) {
                if (!isDrawing) return;
                var rect = canvas.getBoundingClientRect();
                var x = e.clientX - rect.left;
                var y = e.clientY - rect.top;
                ctx.lineTo(x, y);
                ctx.stroke();
            });

            canvas.addEventListener('mouseup', function() {
                isDrawing = false;
            });

            canvas.addEventListener('mouseout', function() {
                isDrawing = false;
            });

            // Touch events for mobile devices
            canvas.addEventListener('touchstart', function(e) {
                e.preventDefault();
                var touch = e.touches[0];
                var rect = canvas.getBoundingClientRect();
                var x = touch.clientX - rect.left;
                var y = touch.clientY - rect.top;
                isDrawing = true;
                hasSignature = true;
                ctx.beginPath();
                ctx.moveTo(x, y);
            });

            canvas.addEventListener('touchmove', function(e) {
                e.preventDefault();
                if (!isDrawing) return;
                var touch = e.touches[0];
                var rect = canvas.getBoundingClientRect();
                var x = touch.clientX - rect.left;
                var y = touch.clientY - rect.top;
                ctx.lineTo(x, y);
                ctx.stroke();
            });

            canvas.addEventListener('touchend', function(e) {
                e.preventDefault();
                isDrawing = false;
            });

            // Clear signature button
            document.getElementById('clearSignature').addEventListener('click', function() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                document.getElementById('id_signature_base64').value = '';
                document.getElementById('saveStatus').textContent = '';
                hasSignature = false;
            });

            // Save signature button
            document.getElementById('saveSignature').addEventListener('click', function() {
                if (!hasSignature) {
                    alert("אנא ספק/י חתימה תחילה.");
                    document.getElementById('saveStatus').textContent = '';
                } else {
                    var signatureData = canvas.toDataURL('image/png');
                    document.getElementById('id_signature_base64').value = signatureData;
                    document.getElementById('saveStatus').textContent = 'החתימה נשמרה!';
                    console.log("Signature captured (Base64 length):", signatureData.length);
                }
            });

            // Form submission validation
            document.addEventListener('submit', function(event) {
                // Check if signature exists
                if (!hasSignature && document.getElementById('id_signature_base64').value === '') {
                    alert("אנא חתום/חתמי על טופס ההסכמה לפני שתמשיך/י.");
                    event.preventDefault();
                    return;
                }

                // Auto-save signature if not already saved
                if (hasSignature && document.getElementById('id_signature_base64').value === '') {
                    var signatureData = canvas.toDataURL('image/png');
                    document.getElementById('id_signature_base64').value = signatureData;
                }

                // Validate required fields
                var fullName = document.getElementById('id_participant_full_name').value.trim();
                var idNumber = document.getElementById('id_participant_id_number').value.trim();
                var paymentChoice = document.querySelector('input[name="previous_payment_choice"]:checked');

                if (!fullName) {
                    alert("אנא מלא/י שם מלא.");
                    event.preventDefault();
                    return;
                }

                if (!idNumber) {
                    alert("אנא מלא/י מספר תעודת זהות.");
                    event.preventDefault();
                    return;
                }

                if (!paymentChoice) {
                    alert("אנא בחר/י באפשרות לגבי גמול קודם.");
                    event.preventDefault();
                    return;
                }

                // If chose option 1 (received previous payment), validate amount
                if (paymentChoice.value === '1') {
                    var previousAmount = document.getElementById('id_previous_payment_amount').value.trim();
                    if (!previousAmount) {
                        alert("אנא מלא/י סכום גמול קודם.");
                        event.preventDefault();
                        return;
                    }
                }
            });

            // JavaScript for showing/hiding previous payment amount field
            var previousPaymentChoiceRadios = document.querySelectorAll('input[name="previous_payment_choice"]');
            var previousPaymentAmountDiv = document.getElementById('previousPaymentAmountDiv');

            function togglePreviousPaymentAmount() {
                var selectedChoice = document.querySelector('input[name="previous_payment_choice"]:checked');
                if (selectedChoice && selectedChoice.value === '1') {
                    previousPaymentAmountDiv.style.display = 'block';
                } else {
                    previousPaymentAmountDiv.style.display = 'none';
                    // Clear the value if the field is hidden
                    document.getElementById('id_previous_payment_amount').value = '';
                }
            }

            // Add event listeners to radio buttons
            previousPaymentChoiceRadios.forEach(function(radio) {
                radio.addEventListener('change', togglePreviousPaymentAmount);
            });

            // Call on page load to set initial state
            togglePreviousPaymentAmount();
        });

        // Reduce delay after validation failure
        otree.forms.button_reenable_delay = 500;
    </script>

    <style>
        .btn {
            padding: 8px 16px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        .btn-warning {
            background-color: #ffc107;
            color: #212529;
        }

        .btn-primary {
            background-color: #007bff;
            color: white;
        }

        .btn-success {
            background-color: #28a745;
            color: white;
        }

        .btn-sm {
            padding: 4px 8px;
            font-size: 12px;
        }

        .btn-lg {
            padding: 12px 24px;
            font-size: 16px;
        }

        canvas {
            background-color: white;
        }

        input[type="text"], input[type="number"] {
            border: 1px solid #ccc;
            border-radius: 3px;
            width: 300px;
            padding: 5px;
            direction: rtl;
            text-align: right;
        }

        input[type="radio"] {
            margin-left: 8px;
        }

        label {
            cursor: pointer;
        }

        /* Hide the signature_base64 field since it's a hidden field */
        input[name="signature_base64"] {
            display: none;
        }
    </style>
{% endblock %}