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

@section('styles')
    <style>
        .d-none {
            display: none;
        }
    </style>
@endsection

@section('content')
    <ol
        class="py-10 w-full flex flex-col space-y-3 lg:space-y-0 lg:flex-row lg:space-x-2 lg:space-x-10 justify-center lg:items-center ">
        <li class="flex items-center space-x-5 ">
            <span class="flex items-center justify-center w-8 h-8 border border-gray-500 rounded-full shrink-0 ">
                <svg viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                    <g id="SVGRepo_iconCarrier">
                        <title>Success</title>
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="add-copy" fill="#005aab" transform="translate(42.666667, 42.666667)">
                                <path
                                    d="M213.333333,3.55271368e-14 C95.51296,3.55271368e-14 3.55271368e-14,95.51296 3.55271368e-14,213.333333 C3.55271368e-14,331.153707 95.51296,426.666667 213.333333,426.666667 C331.153707,426.666667 426.666667,331.153707 426.666667,213.333333 C426.666667,95.51296 331.153707,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,384 C119.227947,384 42.6666667,307.43872 42.6666667,213.333333 C42.6666667,119.227947 119.227947,42.6666667 213.333333,42.6666667 C307.43872,42.6666667 384,119.227947 384,213.333333 C384,307.43872 307.438933,384 213.333333,384 Z M293.669333,137.114453 L323.835947,167.281067 L192,299.66912 L112.916693,220.585813 L143.083307,190.4192 L192,239.335893 L293.669333,137.114453 Z"
                                    id="Shape"> </path>
                            </g>
                        </g>
                    </g>
                </svg>
            </span>
            <span>
                <h3 class="font-medium leading-tight text-xs">Account Opening</h3>
                <p class="text-sm">Step-1</p>
            </span>
        </li>

        <li class="flex items-center space-x-5 ">
            <span
                class="flex items-center justify-center w-8 h-8 border border-brandBlue bg-brandBlue text-white font-extrabold rounded-full shrink-0">
                2
            </span>
            <span>
                <h3 class="font-medium leading-tight text-xs text-brandBlue font-extrabold">KYC Form</h3>
                <p class="text-sm">Step-2</p>
            </span>
        </li>
        <li class="flex items-center space-x-5 ">
            <span class="flex items-center justify-center w-8 h-8 border border-gray-500 rounded-full shrink-0 ">
                3
            </span>
            <span>
                <h3 class="font-medium leading-tight text-xs">Confirmation</h3>
                <p class="text-sm">Step-3</p>
            </span>
        </li>
    </ol>

    <section
        class="w-full py-10 mx-auto flex flex-wrap object-cover justify-center items-center gap-y-20 gap-x-14 mt-10 xl:h-[550px]"
        id="customerType">
        <input type="hidden" name="customer_type" id="customerTypeField">
        <div class="flex flex-col sm:space-y-5 lg:space-y-0 lg:flex-row lg:space-x-10">
            <div
                class="w-56 h-[280px] lg:w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl existingCustomerBtn">
                <a onclick="highlightForm(this)">
                    <img src="{{ asset('assets/img/existingCustomer.png') }}" class="p-4 rounded-t-xl" />
                    <div class="px-4 py-3">
                        <p class="lg:text-xl font-bold text-black truncate block capitalize text-center">Existing
                            Customer</p>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <section class="w-full h-[500px] flex justify-center items-center mt-56" id="existingCustomerSection">
        <div class="w-full flex flex-col sm:space-y-10 justify-center items-center">
            <div class="flex flex-col sm: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"
                    id="verifyPhone" onclick="highlightDiv(this)">
                    <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"
                    id="verifyEmail" onclick="highlightDiv(this)">
                    <div class="flex flex-col space-y-10">
                        <h2 class="text-lg text-center">Email Address</h2>
                    </div>
                </div>
                <div class="px-5 py-3 w-[300px] border-2 rounded-md bg-white shadow-lg flex justify-center items-center"
                    id="verifyReferenceNumber" onclick="highlightDiv(this)">
                    <div class="flex flex-col space-y-10">
                        <h2 class="text-lg text-center">Reference Number</h2>
                    </div>
                </div>
            </div>

            <input type="hidden" name="otp_for" id="otpFor" value="{{ $otp }}">
            <div class="w-full p-2 rounded-lg d-none email-form">
                <div class="w-full flex flex-col space-y-5 items-center py-8 px-10 ">
                    <input type="email" id="email" name="email"
                        class="w-full lg:w-1/2 outline-none py-3 px-5 border-2 rounded-md"
                        placeholder="Please enter your Email Address">
                </div>

                <div
                    class="flex flex-col space-y-5 lg:space-y-0 lg:flex-row lg:space-x-10 lg:justify-center items-center px-5 py-3 ">
                    <button type="submit"
                        class="otpSendBtn w-44 py-3 px-5 bg-[#005aab] text-white font-semibold rounded-lg">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-lg transition duration-300 ease-in-out transform hover:scale-105">Back</button>
                    </a>
                </div>
            </div>

            <div class="w-full p-2 rounded-lg d-none phone-form">
                <div class="w-full flex flex-col space-y-5 items-center py-8 px-10 ">
                    <input type="tel" id="phone" name="mobile_number"
                        class="w-full lg:w-1/2 outline-none py-3 px-5 border-2 rounded-md"
                        placeholder="Please enter your Mobile Number">
                </div>

                <div
                    class="flex flex-col space-y-5 lg:space-y-0 lg:flex-row lg:space-x-10 lg:justify-center items-center px-5 py-3 ">
                    <button type="submit"
                        class="otpSendBtn w-44 py-3 px-5 bg-[#005aab] text-white font-semibold rounded-lg">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-lg transition duration-300 ease-in-out transform hover:scale-105">Back</button>
                    </a>
                </div>
            </div>


            <div class="w-full p-2 rounded-lg d-none reference-form">
                <div class="w-full flex flex-col space-y-5 items-center py-8 px-10 ">
                    <input type="text" id="referenceNumber" name="reference_number"
                        class="w-full lg:w-1/2 outline-none py-3 px-5 border-2 rounded-md"
                        placeholder="Please enter your Reference Number">
                </div>

                <div
                    class="flex flex-col space-y-5 lg:space-y-0 lg:flex-row lg:space-x-10 lg:justify-center items-center px-5 py-3 ">
                    <button type="submit"
                        class="otpSendBtn w-44 py-3 px-5 bg-[#005aab] text-white font-semibold rounded-lg">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-lg transition duration-300 ease-in-out transform hover:scale-105">Back</button>
                    </a>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('scripts')
    <script>
        let tabsContainer = document.querySelector("#tabs");
        let tabTogglers = tabsContainer.querySelectorAll("#tabs a");

        tabTogglers.forEach(function(toggler) {
            toggler.addEventListener("click", function(e) {
                e.preventDefault();

                let tabName = this.getAttribute("href");

                let tabContents = document.querySelector("#tab-contents");

                for (let i = 0; i < tabContents.children.length; i++) {

                    tabTogglers[i].parentElement.classList.remove("border-t", "border-r", "border-l",
                        "-mb-px", "bg-white");
                    tabContents.children[i].classList.remove("hidden");
                    if ("#" + tabContents.children[i].id === tabName) {
                        continue;
                    }
                    tabContents.children[i].classList.add("hidden");

                }
                e.target.parentElement.classList.add("border-t", "border-r", "border-l", "-mb-px",
                    "bg-white");
            });
        });
    </script>

    <script>
        $(document).on('click', '.otpSendBtn', function(event) {
            event.preventDefault();
            if ($('#emailValidation').is(':visible') || $('#mobileValidation').is(':visible')) {
                JsLoadingOverlay.show({
                    'overlayBackgroundColor': '#666666',
                    'overlayOpacity': 0.6,
                    'spinnerIcon': 'ball-atom',
                    'spinnerColor': '#000',
                    'spinnerSize': '2x',
                    'overlayIDName': 'overlay',
                    'spinnerIDName': 'spinner',
                    'spinnerZIndex': 99999,
                    'overlayZIndex': 99998
                });

                // Submit the form
                $(this).closest('form').submit();
            }
        });
    </script>
    <script>
        function highlightForm(element) {
            // Reset all other forms to default state
            document.querySelectorAll('.existingCustomerBtn').forEach(item => {
                item.style.transform = 'scale(1)';
                item.style.shadow = 'initial';
            });

            // Highlight the selected form
            element.style.transform = 'scale(1.05)';
            element.style.shadow = '0 0 20px #00f';
            document.getElementById('customerTypeField').value = 'existing';
        }

        function highlightDiv(element) {
            // Reset all other forms to default state
            document.querySelectorAll('.email-form, .phone-form, .reference-form').forEach(item => {
                item.classList.add('d-none');
            });

            // Highlight the selected div
            element.style.shadow = 'initial';
            element.classList.remove('d-none');
        }

        $(document).ready(function() {
            $("#existingCustomerSection").hide();

            // existing customer button click
            $(".existingCustomerBtn").click(function() {
                $("#existingCustomerSection").show();
                $("#newCustomerSection").hide();
                $("#customerType").addClass('d-none');

                $("#customerTypeField").val('existing');
            });
        });


        // existing customer verify email
        $(document).on('click', '#verifyEmail', function() {
            existingCustomerSection = $(this).closest('#existingCustomerSection');

            existingCustomerSection.find('div.email-form').show();
            existingCustomerSection.find('div.phone-form').hide();
            existingCustomerSection.find('div.reference-number-form').hide();

            existingCustomerSection.find('#phone').val('');
            existingCustomerSection.find('#reference_number').val('');
        });

        // existing customer verify phone
        $(document).on('click', '#verifyPhone', function() {
            existingCustomerSection = $(this).closest('#existingCustomerSection');

            existingCustomerSection.find('div.phone-form').show();
            existingCustomerSection.find('div.email-form').hide();
            existingCustomerSection.find('div.reference-number-form').hide();

            existingCustomerSection.find('#email').val('');
            existingCustomerSection.find('#reference_number').val('');
        });

        // existing customer verify reference number
        $(document).on('click', '#verifyReferenceNumber', function() {
            existingCustomerSection = $(this).closest('#existingCustomerSection');

            existingCustomerSection.find('div.reference-number-form').show();
            existingCustomerSection.find('div.email-form').hide();
            existingCustomerSection.find('div.phone-form').hide();

            existingCustomerSection.find('#phone').val('');
            existingCustomerSection.find('#email').val('');
        });

        // existing customer send otp
        $(document).on('click', '#existingCustomerSection .otpSendBtn', function() {
            let phone = $('#existingCustomerSection #phone').val();
            let email = $('#existingCustomerSection #email').val();
            let otpFor = $('#existingCustomerSection #otpFor').val();
            let customerType = $('#customerTypeField').val();
            let referenceNumber = $('#existingCustomerSection #reference_number').val();

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

                        $('#phone').val('');
                        $('#email').val('');
                    }
                }
            });
        });
    </script>
@endsection