@extends('LandingPage.Layouts.master')



@section('content')
<style>
    .verification-form {
        padding: 30px;
        background-color: #f2f2f2;
        border-radius: 12px;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        max-width: 400px;
        margin: 0 auto;
    }

    .verification-input {
        width: 60px;
        height: 60px;
        text-align: center;
        font-size: 28px;
        font-weight: bold;
        border: 2px solid #7d5c47;
        border-radius: 10px;
        outline: none;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        background-color: #fff;
    }

    .verification-input:focus {
        border-color: #7d5c47;
        box-shadow: 0 0 8px rgba(125, 92, 71, 0.4);
    }

    .verification-input:disabled {
        background-color: #f2f2f2;
        cursor: not-allowed;
    }


    .verify-btn {
        padding: 15px 30px;
        background-color: #7d5c47;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 18px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
        margin-top: 20px;
    }

    .verify-btn:hover {
        background-color: #6e4e3d;
        transform: translateY(-2px);
    }

    .verify-btn:active {
        transform: translateY(2px);
    }

    @media (max-width: 768px) {
        .verification-form {
            padding: 25px;
        }

        .verification-input {
            width: 50px;
            height: 50px;
            font-size: 24px;
        }

        .verify-btn {
            width: 100%;
            font-size: 16px;
        }
    }

</style>

<div class="breadcrumb-block style-shared">
    <div class="breadcrumb-main bg-linear overflow-hidden">
        <div class="container lg:pt-[134px] pt-24 pb-10 relative">
            <div class="main-content w-full h-full flex flex-col items-center justify-center relative z-[1]">
                <div class="text-content">
                    <div class="heading2 text-center">{{translate('Verfication Code')}}</div>
                    <div class="link flex items-center justify-center gap-1 caption1 mt-3">
                        <a href='{{route('Landing.index')}}'>{{translate('Homepage')}}</a>
                        <i class="ph ph-caret-right text-sm text-secondary2"></i>
                        <div class='text-secondary2 capitalize'>{{translate('Verfiy Account')}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if (session('success'))
<script>
    Swal.fire({
        icon: "success",
        html: '<span style="font-size: 16px;">{{ session('success') }}</span>',
        showConfirmButton: false,
        timer: 3000
    });
</script>
@endif

@if (session('error'))
<script>
Swal.fire({
    icon: "error",
    html: '<span style="font-size: 16px;">{{ session('error') }}</span>',
    showConfirmButton: false,
    timer: 3000
});
</script>
@endif
<div class="register-block md:py-20 py-10">
    <div class="container">
        <form action="{{ route('landing.verify.email.post', ['token' => $token]) }}" method="POST">
            @csrf
            <div class="verification-form mt-8">
                <div class="input-group flex gap-4 justify-center">
                    <input type="text" maxlength="1" class="verification-input" id="input1" name="verification_code[]" oninput="moveFocus(1)" required />
                    <input type="text" maxlength="1" class="verification-input" id="input2" name="verification_code[]" oninput="moveFocus(2)" required />
                    <input type="text" maxlength="1" class="verification-input" id="input3" name="verification_code[]" oninput="moveFocus(3)" required />
                    <input type="text" maxlength="1" class="verification-input" id="input4" name="verification_code[]" oninput="moveFocus(4)" required />
                </div>
                <div class="text-center mt-6">
                    <button class="verify-btn">{{translate('Verify')}}</button>
                </div>


            </div>
        </form>
        <div class="text-center mt-4">
            <form action="{{ route('landing.resend.verification') }}" method="POST">
                @csrf
                <input type="hidden" name="email" value="{{ $email }}">
                <button type="submit" class="verify-btn">{{ translate('Resend Code') }}</button>
            </form>
        </div>
    </div>
</div>


<script>
    function moveFocus(inputId) {
        if (inputId < 4) {
            var nextInput = document.getElementById("input" + (inputId + 1));
            if (nextInput && nextInput.value.length === 1) {
                nextInput.focus();
            }
        }
    }

</script>

@endsection