@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop
@section('container')
<div class="page-content">

    <div class="account login">
        <div class="container">
            <div class="inner">
                <h1 class="text-center">{{ShowLabelById(185)}}</h1>
                <div class="login-nav">
                    <a href="{{ route('login') }}">{{ShowLabelById(184)}}</a>
                    <a href="{{ route('register') }}" class="active">{{ShowLabelById(183)}}</a>
                </div>
                <div class="login-form">
                    <form method="POST" action="{{ route('register.verifyCode') }}" id="verify-code-form">
                        @csrf
                        @php
                            $phone = session('sms_phone');
                            $name = session('sms_name') ?? '';
                            $formattedPhone = substr($phone, 0, 3).' '.substr($phone, 3, 2).' '.substr($phone, 5);
                        @endphp

                        <div class="code">
                            <div class="text">{{ShowLabelById(187)}}: </div>
                            <div class="number">{{$formattedPhone}}</div>
                        </div>

                        <div class="form-item">
                            <label for="login">{{ShowLabelById(188)}} *</label>
                            <input type="text" id="code" name="code" placeholder="XXXX">
                        </div>

                        <input type="hidden" name="phone" value="{{$phone}}">
                        <input type="hidden" name="name" value="{{$name}}">

                        <div class="code-descr" id="send-code-btn">
                            {{ShowLabelById(189)}}  <span id="timer">30</span>  {{ShowLabelById(191)}}
                        </div>

                        <div class="sign-in-link">
                        <button type="button" id="resend-code" style="display:none;" >
                            {{ ShowLabelById(192) }}
                        </button>
                        </div>

                        <div class="login-submit">
                            <button type="submit" class="common-btn" disabled>
                                {{ ShowLabelById(182) }}
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

</div>
{{--
    @if(session('success'))
        <div>{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div>{{ session('error') }}</div>
    @endif--}}
@stop
@push('other-scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const codeInput = document.getElementById("code");
            const submitButton = document.querySelector(".login-submit .common-btn");
            const resendButton = document.getElementById("resend-code");
            const sendCodeDiv = document.getElementById("send-code-btn");
            const timerSpan = document.getElementById("timer");
            const form = document.getElementById("verify-code-form");

            // Разблокировка кнопки при вводе 4 цифр
            codeInput.addEventListener("input", function() {
                submitButton.disabled = this.value.replace(/\D/g,'').length !== 4;
            });

            // Таймер на 30 секунд
            let timeLeft = 30;
            const countdown = setInterval(() => {
                timeLeft--;
                timerSpan.textContent = timeLeft;
                if(timeLeft <= 0) {
                    clearInterval(countdown);
                    sendCodeDiv.style.display = "none";
                    resendButton.style.display = "inline-block";
                }
            }, 1000);

            // Повторная отправка кода через AJAX
            resendButton.addEventListener("click", function() {
                fetch("{{ route('register.resend') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
                    },
                    body: JSON.stringify({
                        phone: form.querySelector('input[name="phone"]').value,
                        name: form.querySelector('input[name="name"]').value
                    })
                })
                    .then(response => response.json())
                    .then(data => {
                        if(data.status) {
                            Notiflix.Notify.success("Код отправлен повторно");
                        } else {
                            Notiflix.Notify.failure("Ошибка при отправке кода");
                        }
                    })
                    .catch(err => Notiflix.Notify.failure("Ошибка: " + err));
            });
        });


    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            @if(session('success'))
            Notiflix.Notify.success("{{ session('success') }}");
            @endif

            @if(session('error'))
            Notiflix.Notify.failure("{{ session('error') }}");
            @endif

            @if(session('warning'))
            Notiflix.Notify.warning("{{ session('warning') }}");
            @endif

            @if(session('info'))
            Notiflix.Notify.info("{{ session('info') }}");
            @endif
        });
    </script>
@endpush