@section('title')

    ورود به مکسن
@endsection
@section('script')
    <script>
        $('.mobile-menu-toggle').click(function () {
            $('.loaded').addClass('mmenu-active');
        })
        $('.mobile-menu-close').click(function () {
            $('.loaded').removeClass('mmenu-active');
        })
        $('div#categories > ul.mobile-menu > li > a').append('<span class="toggle-btn"> </span>');
        $('div#categories > ul.mobile-menu > li > a').append('<span class="toggle-btn"> </span>');
        $('div#categories > ul.mobile-menu > li > a > span.toggle-btn').click(function (e) {

            e.preventDefault();
            $(this).parent().next().slideToggle(300).parent().toggleClass("show");
        })


        function isNumberKey(evt) {

            let charCode = (evt.which) ? evt.which : evt.keyCode;

            if (charCode > 31 && (charCode < 48 || charCode > 57)) {

                return false;

            }

            return true;

        }
        function moveFocus(current, direction) {
            let inputs = document.querySelectorAll('.input-container input');
            let next = Array.from(inputs).indexOf(current) + direction;

            // اگر ورودی جاری پر شده باشد و ورودی بعدی موجود باشد، فوکوس را به ورودی بعدی منتقل کن
            if (current.value.length >= 1 && next < inputs.length) {
                inputs[next].focus();
            }
            // اگر کاربر Backspace بزند و ورودی جاری خالی باشد، فوکوس را به ورودی قبلی منتقل کن
            else if (current.value.length === 0 && direction === -1) {
                if (next >= 0) {
                    inputs[next].focus();
                }
            }

            // بررسی اینکه آیا آخرین ورودی پر شده است
            if (next === inputs.length && current.value.length === 1) {
                updateMainInput(); // فرض بر این است که این تابع مقادیر را به‌روزرسانی می‌کند
                setTimeout(function() {
                    document.getElementById('submitButton').click(); // کلیک بر روی دکمه
                }, 500);

                // برداشتن فوکوس از آخرین ورودی
                current.blur(); // فوکوس را از ورودی جاری بردار
            }
        }



        function handleBackspace(event, current) {

            if (event.key === 'Backspace' && current.value.length === 0) {

                let inputs = document.querySelectorAll('.input-container input');

                let prevIndex = Array.from(inputs).indexOf(current) - 1;

                if (prevIndex >= 0) {

                    inputs[prevIndex].focus();

                }

            }

        }


        function updateMainInput() {
            $('#mainInput').val('');
            let inputs = document.querySelectorAll('.input-container input');
            console.log(inputs);
            let otpValue = Array.from(inputs).map(input => input.value).join(''); // بدون ,
            console.log(otpValue);


        }

    </script>
@endsection
@section('style')
    <style>
        button.btn{
            background-color: #000;
            border: none;
        }
        button.btn:hover{
            background-color: #000;
            border: none;
        }
        input[type= checkbox]:checked {
            background-color: #3474d4;
            border: none;
        }
        .login-btn::after {
            display: none !important;
        }

        .header-transparent {
            position: static !important;
            background-color: #222;
        }

        .bg-light-gray {
            cursor: pointer !important;
            padding: 15px;
            background-color: #f2f2f2 !important;
        }

        .alert-danger {
            background-color: #ffd6d6 !important;
        }

        .alert button {
            background: transparent;
            border: none;
            margin-left: 8px;
            color: #b10001 !important;
            cursor: pointer;
        }

        .br20 {
            border-radius: 20px !important;
        }

        .login-popup {
            margin: 0 !important;
        }

        .container {
            max-width: 90% !important;
        }
        #signin{
            padding: 80px 25px;
            border: 1px solid #ccc;
            border-radius: 20px;
            box-shadow: 1px 2px 3px black;
        }
        .error-validate-alert{
            font-size: 9pt;
            color: red;
        }

        .input-container {
            display: flex;
            gap: 10px;
            justify-content: space-around;
            margin-bottom: 11px;
            direction: ltr;

        }

        .input-container input {

            width: 40px;

            height: 40px;

            font-size: 20px;

            text-align: center;

            border: 2px solid #ccc; /* دور ورودی‌ها */

            border-radius: 5px;

            outline: none;

        }

        .input-container input:focus {

            border-color: #007bff; /* رنگ مرز هنگام فوکوس */

        }


    </style>
@endsection




<main class="main">
    <div class="row" style="height: auto;overflow: hidden;max-height: 750px">
        <div class="col-12 col-md- col-xl-4">
            <div class="login-popup br20" style="margin: 0 auto !important;">
                <div class="form-box">
                    <div class="tab tab-nav-simple tab-nav-boxed form-tab">

                        <div class="tab-content">
                            <livewire:auth.notification/>
                            @if ($showRegisterForm)
                                <livewire:auth.register/>
                            @else
                                <livewire:auth.login/>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12  col-md-7 col-xl-8">
            <img src="{{ asset('admin/images/auth-bg.png') }}" style="height: 100%;width: auto">
        </div>
    </div>
</main>