@extends('frontend.layouts.partials.app')
@section('title', 'OTP')

@section('styles')
    <style>
        /*.hidden {*/
        /*    display: none;*/
        /*}*/

        .highlight {
            border-bottom-width: 4px;
            border-bottom-color: #005aab;
            transition: border-color 0.3s ease-in-out;
        }

        .error-message {
            color: #FF0000;
            font-size: 0.875rem;
        }

        .otp-verification-message {
            color: #005aab;
            font-weight: bold;
            margin-bottom: 1rem;
        }
    </style>
@endsection

@section('content')
    <section class="w-full h-[500px] lg:h-[400px] flex justify-center items-center mb-8" id="newCustomerSection">
        <div class="w-full flex flex-col sm:space-y-10 justify-center items-center">
            <div class="flex flex-col space-y-5 lg:space-y-0 lg:flex-row lg:space-x-10 items-center">
                <div class="px-5 py-3 w-[300px] border-2 rounded-md bg-white shadow-lg flex justify-center items-center hover:bg-gradient-to-r hover:from-[#004d6e] hover:to-[#00accc] transition ease-in-out duration-200 hover:cursor-pointer hover:text-white"
                    id="verifyNewPhone" onclick="highlightDiv(this, 'phone')">
                    <div class="flex flex-col space-y-10">
                        <h2 class="text-lg text-center">Phone Number</h2>
                    </div>
                </div>
                <div class="px-5 py-3 w-[300px] border-2 rounded-md bg-white shadow-lg flex justify-center items-center hover:bg-gradient-to-r hover:from-[#004d6e] hover:to-[#00accc] transition ease-in-out duration-200 hover:cursor-pointer hover:text-white"
                    id="verifyNewEmail" onclick="highlightDiv(this, 'email')">
                    <div class="flex flex-col space-y-10">
                        <h2 class="text-lg text-center">Email Address</h2>
                    </div>
                </div>
            </div>

            <p class="otp-verification-message text-center my-3 px-2">In order to continue with the application, you need to
                verify your OTP first.</p>

            <input type="hidden" name="otp_for" id="otpFor" value="{{ $otp }}">

            {{-- new customer email form --}}
            <div class="w-1/2 rounded-md hidden email-form transition duration-300 ease-in-out transform">
                <div class="flex flex-col space-y-5 py-8">
                    <input type="email" id="email" name="email"
                        class="border-2 rounded-md outline-none py-3 px-5 transition duration-300 ease-in-out transform"
                        placeholder="Please enter your Email Address">
                    <span class="text-red-500 hidden" id="emailInvalid">Invalid email format</span>
                    <div class="error-message hidden" id="emailValidation">The email you entered has already been
                        registered for KYC verification. To update anything, please go to the existing customer section and
                        try with the same email.
                    </div>
                </div>
                <div class="flex flex-col lg:flex-row lg:space-x-10 items-center justify-center px-5 py-3">
                    <button
                        class="otpSendBtn w-44 py-3 px-5 bg-[#005aab] text-white font-semibold rounded-md hover:bg-gradient-to-r hover:from-[#004d6e] hover:to-[#00accc] transition ease-in-out duration-200 hover:cursor-pointer hover:text-white">Send
                        OTP</button>
                    <a href="{{ route('onlineServices') }}" class="inline-block mt-4 lg:mt-0">
                        <button
                            class="w-44 py-3 px-5 bg-[#005aab] text-white font-semibold rounded-md hover:bg-gradient-to-r hover:from-[#cc4d4d] hover:to-[#ff6666] transition ease-in-out duration-200 hover:cursor-pointer hover:text-white">Back</button>
                    </a>
                </div>
            </div>

            {{-- new customer phone form --}}
            <div class="w-1/2 rounded-md hidden phone-form transition duration-300 ease-in-out transform">
                <div class="flex flex-col space-y-5 py-8">
                    <input type="tel" id="phone" name="phone_no"
                        class="border-2 rounded-md outline-none py-3 px-5 transition duration-300 ease-in-out transform"
                        placeholder="Please enter your Mobile Number">
                    <span class="text-red-500 hidden" id="phoneInvalid">Invalid phone number format</span>
                    <div class="error-message hidden" id="mobileValidation">
                        The mobile number you entered is already registered for KYC verification. To update anything, please
                        go to the existing customer section and try with the same mobile number.
                    </div>

                </div>
                <div class="flex flex-col lg:flex-row lg:space-x-10 items-center justify-center px-5 py-3">
                    <button
                        class="otpSendBtn w-44 py-3 px-5 bg-[#005aab] text-white font-semibold rounded-md hover:bg-gradient-to-r hover:from-[#004d6e] hover:to-[#00accc] transition ease-in-out duration-200 hover:cursor-pointer hover:text-white">Send
                        OTP</button>
                    <a href="{{ route('onlineServices') }}" class="inline-block mt-4 lg:mt-0">
                        <button
                            class="w-44 py-3 px-5 bg-[#005aab] text-white font-semibold rounded-md hover:bg-gradient-to-r hover:from-[#cc4d4d] hover:to-[#ff6666] transition ease-in-out duration-200 hover:cursor-pointer hover:text-white">Back</button>
                    </a>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('scripts')
    <script>
        function highlightDiv(element, type) {
            // Remove highlight from all options except the selected one
            document.querySelectorAll('.flex.items-center > div').forEach(div => {
                if (div !== element) {
                    div.classList.remove('highlight');
                }
            });

            // Add highlight to the selected option
            element.classList.add('highlight');

            // Hide all forms
            document.querySelectorAll('.email-form, .phone-form').forEach(form => {
                form.classList.add('hidden');
            });

            // Show the selected form with animation
            document.querySelector(`.${type}-form`).classList.remove('hidden');
            document.querySelector(`.${type}-form`).classList.add('animate-fade-in');
        }

        document.querySelectorAll('.otpSendBtn').forEach(button => {
            button.addEventListener('click', function(event) {
                event.preventDefault();
                let emailValidation = document.getElementById('emailValidation').classList.contains(
                    'hidden');
                let mobileValidation = document.getElementById('mobileValidation').classList.contains(
                    'hidden');

                if (emailValidation && mobileValidation) {
                    let form = this.closest('form');
                    form.submit();
                }
            });
        });

        // New customer send OTP
        $(document).ready(function() {
            let emailInput = $('#newCustomerSection #email');
            let phoneInput = $('#newCustomerSection #phone');

            function validateEmail(email) {
                const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
                return emailPattern.test(email);
            }

            function validatePhone(phone) {
                const phonePattern = /^[0-9]{10}$/;
                return phonePattern.test(phone);
            }

            function toggleOtpButton() {
                let phone = phoneInput.val();
                let email = emailInput.val();
                let isEmailValid = email && validateEmail(email);
                let isPhoneValid = phone && validatePhone(phone);

                // Enable button only if either phone or email is valid
                $('.otpSendBtn').prop('disabled', !(isPhoneValid || isEmailValid));

                // Show/hide validation messages based on input validity
                if (email && !isEmailValid) {
                    $('#emailInvalid').show();
                } else {
                    $('#emailInvalid').hide();
                }

                if (phone && !isPhoneValid) {
                    $('#phoneInvalid').show();
                } else {
                    $('#phoneInvalid').hide();
                }
            }

            // Attach event listeners to input fields
            phoneInput.on('input', toggleOtpButton);
            emailInput.on('input', toggleOtpButton);

            $(document).on('click', '#newCustomerSection .otpSendBtn', function(e) {
                e.preventDefault();

                let $this = $(this);
                let phone = phoneInput.val();
                let email = emailInput.val();
                let otpFor = $('#newCustomerSection #otpFor').val();

                // Check validation before sending request
                let isEmailValid = validateEmail(email);
                let isPhoneValid = validatePhone(phone);

                if (!isEmailValid && !isPhoneValid) {
                    toggleOtpButton();
                    return;
                }

                // Store original button text
                let originalText = $this.html();

                // Add loading spinner and text
                $this.html(
                    '<svg aria-hidden="true" role="status" class="inline mr-3 w-4 h-4 text-white animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"></path><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"></path></svg>Loading...'
                );
                $this.prop('disabled', true);

                $.ajax({
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: "{{ route('sendOtp') }}",
                    data: {
                        'phone_no': phone,
                        'email': email,
                        'otp_for': otpFor,
                    },
                    success: function(response) {
                        if (response.status) {
                            let url = "{{ route('otpVerification', ':otp') }}";
                            url = url.replace(':otp', response.otp);
                            window.location = url;
                        } else {
                            if (response.validation) {
                                if (response.validation.email) {
                                    $('#mobileValidation').hide();
                                    $('#emailValidation').show();
                                } else {
                                    $('#mobileValidation').show();
                                    $('#emailValidation').hide();
                                }
                            } else {
                                Toast.fire({
                                    icon: 'error',
                                    title: 'There was some issue sending OTP. Please try again!',
                                });
                            }

                            $('#phone').val('');
                            $('#email').val('');
                        }

                        // Restore original button text and state
                        $this.html(originalText);
                        toggleOtpButton();
                    },
                    error: function() {
                        // Handle error case
                        Toast.fire({
                            icon: 'error',
                            title: 'There was an error processing your request. Please try again!',
                        });

                        // Restore original button text and state
                        $this.html(originalText);
                        toggleOtpButton();
                    }
                });
            });

            // Initial button state check
            toggleOtpButton();
        });
    </script>
@endsection