@extends('frontend.layouts.main2')
<title>{{ translate('Verify - Profile') }}</title>
@section('content')

    <!-- ====main-section==== -->
    <main class="pb-20 xs:pb-0">
        <section class="flex items-start justify-between">
            <!-- ==left-banner-part== -->
            <div class="w-[400px] 2xl:w-[500px] h-screen hidden md:block">
                <img src="{{ asset('admin/registrationImages/' . $registrations->banner_image) }}"
                    alt="banner image"
                    class="w-[400px] 2xl:w-[500px] h-full fixed left-0 top-0">
                <picture class="hidden"><img
                        src="{{ asset('frontend/src/images/banner-image-02-alt.png') }}"
                        alt="banner image" loading="lazy"></picture>
            </div>
            <!-- ==right-all-content-part== -->
            <div
                class="md:px-10 xl:px-[60px] py-5 md:py-[30px] md:pb-[50px] flex-1 w-full">
                <!-- =logo-part= -->
                <div
                    class="flex md:items-center justify-between flex-col text-center md:flex-row">
                    <a href="{{ url('/')}}"
                        class="pl-6 xs:pl-10 sm:pl-20 md:pl-0 fixed w-full left-0 top-0 backdrop-blur-[20px] py-5 md:static md:w-fit md:backdrop-blur-none md:py-0 z-20"><img
                            src="{{ asset('admin/Image/AppSettings/Logo/' . $generalSetting->system_logo) }}"
                            alt="system_logo"
                            class="w-[152px] lg:w-[177.74px]"></a>
                    <!-- =small-device-image= -->
                    <picture class="py-7 md:hidden">
                        <img src="{{ asset('frontend/src/images/banner-image-02-alt.png') }}"
                            alt="banner image"
                            class="mb-9 w-full max-h-[400px] object-cover"
                            loading="lazy">
                    </picture>
                    @auth
                    <p class="text-base font-normal text-black">
                        <a href="{{ route('login') }}">{{ Auth::user()->name }}</a>
                        <a href="{{ route('logout') }}" class="font-bold duration-300 hover:text-red-color"
                            onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                            | {{ translate('Logout') }}
                        </a>
                    </p>

                                        <!-- Logout form (hidden) -->
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                        @csrf
                    </form>
                    @else
                    <p class="text-base font-normal text-black">{{ translate('Do you have an account?') }}' <a href="{{ route('login') }}" class="font-bold duration-300 hover:text-red-color">{{ translate('Log in') }}</a></p>
                    @endauth

                </div>
                <!-- =main-part= -->

                <div
                    class="px-6 xs:px-10 sm:px-20 md:px-10 xl:px-[60px] pt-6 xl:pt-20 w-full">
                    <div class="w-full">
                        <div
                            class="text-black text-[22px] lg:text-[26px] xl:text-[30px] font-semibold mb-5 flex items-center gap-2.5"><p>{{ $pages->title }}
                               </p></div>
                                <form action="{{ route('verify.code') }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="user_id" value="{{ $user_id }}">

                                    <div class="mt-4">
                                        <p class="mb-2.5 text-[#191919] text-sm font-semibold">{!! $pages->content !!}</p>
                                        <div class="otp-input-container flex gap-2">
                                            <input type="text" maxlength="1" class="otp-box" id="otp1" oninput="focusNext(this, 'otp2')" required>
                                            <input type="text" maxlength="1" class="otp-box" id="otp2" oninput="focusNext(this, 'otp3')" required>
                                            <input type="text" maxlength="1" class="otp-box" id="otp3" oninput="focusNext(this, 'otp4')" required>
                                            <input type="text" maxlength="1" class="otp-box" id="otp4" oninput="focusNext(this, 'otp5')" required>
                                            <input type="text" maxlength="1" class="otp-box" id="otp5" oninput="focusNext(this, 'otp6')" required>
                                            <input type="text" maxlength="1" class="otp-box" id="otp6" oninput="combineOtp()" required>
                                        </div>
                                        <input type="hidden" name="verify_code" id="verify_code" value="">
                                        @error('verify_code')
                                        <div style="color:red;" class="text-red-500 text-sm mt-1">{{ $message }}</div>
                                        @enderror
                                    </div>
                             <!-- Add a button -->
                            <div class="w-1/2 mt-4">
                                <button type="submit" class="px-6 py-2 bg-red-color text-white text-sm font-medium rounded-[5px] hover:bg-red-700">
                                    {{ translate('Submit') }}
                                </button>
                                <button type="button" onclick="resendCode()" class="px-6 py-2 bg-gray-300 text-black text-sm font-medium rounded-[5px] hover:bg-gray-400">
                                    {{ translate('Resend Code') }}
                                </button>

                            </div>

                    </div>
                </form>

                </div>
            </div>
        </section>
    </main>


@endsection


@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<script>
    function resendCode() {
        fetch('{{ route("resend.code") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}' // CSRF token for protection
            },
            body: JSON.stringify({})
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            // Show success message with SweetAlert
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: data.message,
                confirmButtonText: 'OK',
                customClass: {
                    confirmButton: 'swal2-confirm-black' // Custom class for the "OK" button
                }
            });
        })
        .catch(error => {
            console.error('Error:', error);
            // Show error message with SweetAlert
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'There was a problem with the request.',
                confirmButtonText: 'OK',
                customClass: {
                    confirmButton: 'swal2-confirm-black' // Custom class for the "OK" button
                }
            });
        });
    }
</script>

<style>
    .otp-input-container .otp-box {
        width: 40px;
        height: 40px;
        text-align: center;
        font-size: 1.25rem;
        border: 1px solid #e2e2e2;
        border-radius: 5px;
        color: #191919;
        outline: none;
    }

    .otp-input-container .otp-box:focus {
        border-color: #ff0000; /* Highlighted red color */
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
    }
    /* Custom style for the SweetAlert "OK" button */
    .swal2-confirm-black {
        background-color: black !important;
        color: white !important;
        border-color: black !important;
    }
</style>

<script>
    function focusNext(current, nextId) {
        const input = current.value;
        if (input.length === 1) {
            const nextInput = document.getElementById(nextId);
            if (nextInput) {
                nextInput.focus();
            }
        }
        combineOtp(); // Combine and update hidden input value
    }

    function combineOtp() {
        let otp = '';
        for (let i = 1; i <= 6; i++) {
            const value = document.getElementById(`otp${i}`).value;
            otp += value || ''; // Collect all values
        }
        document.getElementById('verify_code').value = otp;
    }
</script>


<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Handle validation errors
        @if ($errors->any())
            Swal.fire({
                icon: 'error',
                title: '{{ translate("Error") }}',
                text: 'The verification code is incorrect',
                confirmButtonText: 'OK',
                customClass: {
                    confirmButton: 'swal2-confirm-black' // Optional custom style
                }
            });
        @endif

        // Handle success messages
        @if (session('success'))
            Swal.fire({
                icon: 'success',
                title: '{{ translate("Success") }}',
                text: '{{ session("success") }}',
                confirmButtonText: 'OK',
                customClass: {
                    confirmButton: 'swal2-confirm-black' // Optional custom style
                }
            });
        @endif
    });
</script>



@endpush