@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(206) }}</h1>

                    {{-- Тестовый код --}}
                    @if(session('test_code'))
                        <div class="alert alert-info">
                            <strong>Тестовый режим:</strong> Ваш код подтверждения: {{ session('test_code') }}
                        </div>
                    @endif

                    <div class="login-form">
                        <form action="{{ route('forgot.sendCode') }}" method="POST" id="forgot-password-form">
                            @csrf
                            <div class="captcha">
                                <input type="hidden" name="g-recaptcha-response"
                                       id="recaptcha-forgot-password">
                            </div>

                            @if(session('error'))
                                <div class="alert alert-error" id="error-message" style="color:red; font-weight:bold; margin-bottom:15px;">
                                    {{ session('error') }}
                                </div>
                            @endif

                            <div class="form-item">
                                <label for="phone">{{ ShowLabelById(180) }} *</label>
                                <input
                                    type="tel"
                                    autocomplete="tel"
                                    name="phone"
                                    id="phone"
                                    placeholder="0XX-XX-XX-XX"
                                    maxlength="9"
{{--                                    value="{{ old('phone') }}"--}}
                                    required
                                />
                                {{-- Ошибки Laravel --}}
                                @error('phone')
                                <div class="alert alert-error" style="color:red; font-weight:bold; margin-top:5px;">
                                    {{ $message }}
                                </div>
                                @enderror
                                @error('g-recaptcha-response')
                                <div style="color:red;font-weight:bold;">
                                    {{ $message }}
                                </div>
                                @enderror
                            </div>
                            <div class="login-submit">
                                <button type="submit" class="common-btn" disabled>{{ ShowLabelById(207) }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
@stop

@push('other-scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const phoneInput = document.getElementById("phone");
            const submitButton = document.querySelector(".common-btn");

            // Разблокировка кнопки при вводе номера
            phoneInput.addEventListener("input", function() {
                submitButton.disabled = this.value.trim().length < 6;
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const phoneInput = document.getElementById('phone');

            phoneInput.addEventListener('input', function () {
                // Удаляем всё кроме цифр
                this.value = this.value.replace(/\D/g, '');

                // Ограничиваем длину до 9 цифр
                if (this.value.length > 9) {
                    this.value = this.value.slice(0, 9);
                }
            });
        });

    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const errorMsg = document.getElementById('error-message');
            if(errorMsg) {
                setTimeout(() => {
                    errorMsg.style.transition = 'opacity 0.5s';
                    errorMsg.style.opacity = 0;
                    setTimeout(() => errorMsg.remove(), 500);
                }, 6000);
            }
        });
    </script>

@endpush