@extends('templates.' . site('template') . '.layouts.auth')

@section('css')
@endsection

@section('contents')
    <section class="min-h-screen flex justify-center items-center px-6 lg:px-40">
        <div class="bg-gray-800/50 p-6 rounded-lg space-y-6 w-full md:2/3 lg:w-1/3 mx-auto mb-8">

            <a href="{{ route('home') }}" class="text-white flex gap-2  py-2 rounded-md w-32 mb-10">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                    style="fill: rgb(255, 255, 255);transform: ;msFilter:;">
                    <path
                        d="m21.743 12.331-9-10c-.379-.422-1.107-.422-1.486 0l-9 10a.998.998 0 0 0-.17 1.076c.16.361.518.593.913.593h2v7a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-4h4v4a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-7h2a.998.998 0 0 0 .743-1.669z">
                    </path>
                </svg>
                <span class="text-white">Home</span>
            </a>

            <p class="text-2xl text-white">
                <span
                    class="text-transparent bg-clip-text bg-gradient-to-r from-[#FF3BFF] via-[#ECBFBF] to-[#5C24FF] lg:to-[#D94FD5]">Get
                    started with
                </span>
                <span class="font-semibold">{{ site('name') }}</span>
            </p>


            <div class="px-4 lg:px-10 mt-6 space-y-6">
                <p id="noticeMsgOtp" class="hidden noticeMsg"
                    style="position: relative; background-color: #f8f9fa; color:#075985; padding: 16px; border-top: 4px solid #075985; border-radius: 6px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); max-width: 400px; margin: 20px auto; ">
                </p>
            </div>

            <p class="text-white text-sm mb-6">Please enter your details</p>

            <form action="{{ route('user.register-validate') }}" method="POST" class="" id="registerForm">
                @csrf
                <!-- Email or Username -->
                <div class="relative mb-6">
                    <!-- Icon -->
                    <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                        <img src="{{ asset('/assets/templates/pandel/images/login-email-icon.svg') }}" class="h-5"
                            alt="Email Icon" />
                    </div>
                    <!-- Input Wrapper -->
                    <div class="relative">
                        <!-- Label -->
                        <label for="email"
                            class="absolute -top-2 left-4 bg-gray-800 text-xs font-medium text-gray-300 px-1 rounded-xl">
                            Email or Username
                        </label>
                        <!-- Input -->
                        <input type="email" id="email" name="email"
                            class="bg-gray-800/50 border border-gray-700 text-gray-300 rounded-md p-2 pl-10 focus:outline-none w-full"
                            placeholder="Enter Email or Username" />
                    </div>

                    <span>
                        @error('email')
                            {{ $message }}
                        @enderror
                    </span>
                </div>

                <!-- Password Field -->
                <div class="relative mb-6">
                    <!-- Icon -->
                    <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                        <img src="{{ asset('/assets/templates/pandel/images/login-password-icon.svg') }}" class="h-5"
                            alt="Password Icon" />
                    </div>
                    <!-- Input Wrapper -->
                    <div class="relative">
                        <!-- Label -->
                        <label for="password"
                            class="absolute -top-2 left-4 bg-gray-800 text-xs font-medium text-gray-300 px-1 rounded-xl">
                            Password
                        </label>
                        <!-- Input -->
                        <input type="password" name="password" id="password"
                            class="bg-gray-800/50 border border-gray-700 text-gray-300 rounded-md p-2 pl-10 w-full"
                            placeholder="Enter Password" />
                    </div>

                    <span>
                        @error('password')
                            {{ $message }}
                        @enderror
                    </span>
                </div>

                <!-- confirm Password Field -->
                <div class="relative mb-6">
                    <!-- Icon -->
                    <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                        <img src="{{ asset('/assets/templates/pandel/images/login-password-icon.svg') }}" class="h-5"
                            alt="Password Icon" />
                    </div>
                    <!-- Input Wrapper -->
                    <div class="relative">
                        <!-- Label -->
                        <label for="password"
                            class="absolute -top-2 left-4 bg-gray-800 text-xs font-medium text-gray-300 px-1 rounded-xl">
                            Confirm Password
                        </label>
                        <!-- Input -->
                        <input type="password" name="password_confirmation" id="confirm-password"
                            class="bg-gray-800/50 border border-gray-700 text-gray-300 rounded-md p-2 pl-10 w-full"
                            placeholder="Enter Password" />
                    </div>

                    <span>
                        @error('password-confirmation')
                            {{ $message }}
                        @enderror
                    </span>
                </div>



                <!-- Register Button -->
                <div class="flex justify-start mb-6">
                    <button type="submit" id="registerBtn"
                        class="bg-sky-800 w-full text-white px-4 py-2 rounded-2xl hover:bg-gray-600 transition-colors duration-200">
                        Register
                    </button>
                </div>

                <p class="text-center text-gray-400">
                    Already have an account?
                    <a href="{{ route('user.login') }}" class="text-white font-semibold">Sign In</a>
                </p>

            </form>

            <form action="{{ route('user.register-verify') }}" method="POST" class="hidden" id="verifyForm">
                @csrf
                <p class="text-white text-sm mb-6 text-center">Enter the OTP Sent to your Email</p>
                <div class="w-full mb-20 flex items-center justify-center mb-6">

                    <div class="flex lg:gap-10 gap-6 text-white">
                        <input type="number" maxlength="1" name="otp[]" autofocus
                            class="otp-input w-12 h-10 text-center text-xl bg-transparent border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                        <input type="number" maxlength="1" name="otp[]"
                            class="otp-input w-12 h-10 text-center text-xl bg-transparent border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                        <input type="number" maxlength="1" name="otp[]"
                            class="otp-input w-12 h-10 text-center text-xl bg-transparent border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                        <input type="number" maxlength="1" name="otp[]"
                            class="otp-input w-12 h-10 text-center text-xl bg-transparent border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                        <input type="number" maxlength="1" name="otp[]"
                            class="otp-input w-12 h-10 text-center text-xl bg-transparent border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                        <input type="number" maxlength="1" name="otp[]"
                            class="otp-input w-12 h-10 text-center text-xl bg-transparent border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none" />
                    </div>
                    <input type="hidden" name="otp" id="otp" value="" required maxlength="6">

                    <span>
                        @error('email')
                            {{ $message }}
                        @enderror
                    </span>
                </div>

                <div class="w-full mb-6">
                    <div class="text-center">
                        <button type="submit" id="verifyBtn"
                            class="bg-sky-800 w-full text-white px-4 py-2 rounded-2xl hover:bg-gray-600 transition-colors duration-200">Send
                            Code</button>
                    </div>
                </div>

                <div class="text-center text-white py-5">
                    <a href="{{ route('user.register') }}" class="hover:text-purple-700" id="resendBtn">Go Back</a>
                </div>

            </form>
        </div>
    </section>

    <img src="{{ asset('/assets/templates/pandel/images/abstract-bg.svg') }}" alt=""
        class="absolute w-full md:flex top-80 lg:top-20 -z-10" />
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#registerForm').submit(function(e) {
                e.preventDefault(); // Prevent default form submission

                var form = $(this);
                var formData = form.serialize(); // Serialize form data as JSON

                var clicked = $('#registerBtn');

                //disable the submit button
                clicked.addClass('relative disabled');
                clicked.append('<span class="button-spinner"></span>');
                clicked.prop('disabled', true);

                //custom styling
                clicked.addClass('disabled-button');
                clicked.removeClass(
                    'bg-sky-800 hover:bg-gray-600'
                );

                $.ajax({
                    url: form.attr('action'),
                    type: 'POST',
                    data: formData,
                    dataType: 'json',
                    success: function(response) {
                        var verifyText = response.message;
                        var verify = response.verify;

                        toastNotify('success', verifyText);
                        $('.noticeMsg').html(verifyText).show();

                        if (verify == 1) {
                            //hide register form and display verification form
                            $('#registerForm').hide();
                            $('#verifyForm').show();

                            //update page title
                            $('#page-title').html('Verify Email');
                        } else {
                            var url = '{{ route('user.dashboard') }}';
                            window.location.href = url;
                        }




                    },
                    error: function(xhr, status, error) {
                        $('#registerBtn').show();
                        var errors = xhr.responseJSON.errors;

                        if (errors) {
                            $.each(errors, function(field, messages) {
                                var fieldErrors = '';
                                $.each(messages, function(index, message) {
                                    fieldErrors += message + '<br>';
                                });


                                toastNotify('error', fieldErrors);

                                $('.noticeMsg').html(fieldErrors).show();


                            });
                        } else {
                            toastNotify('error', 'An error occured, please try again later');


                        }


                    },
                    complete: function() {
                        clicked.removeClass('disabled');
                        clicked.find('.button-spinner').remove();
                        clicked.prop('disabled', false);

                        //custom styling
                        clicked.removeClass('disabled-button');
                        clicked.addClass(
                            'bg-sky-800 hover:bg-gray-600'
                        );

                    }

                });
            });


            //otp form
            $('#verifyForm').submit(function(e) {
                e.preventDefault(); // Prevent default form submission

                var form = $(this);
                var formData = form.serialize(); // Serialize form data as JSON

                var clicked = $('#verifyBtn');

                //disable the submit button
                clicked.addClass('relative disabled');
                clicked.append('<span class="button-spinner"></span>');
                clicked.prop('disabled', true);

                //custom styling
                clicked.addClass('disabled-button');
                clicked.removeClass(
                    'bg-sky-800 hover:bg-gray-600'
                );

                $.ajax({
                    url: form.attr('action'),
                    type: 'POST',
                    data: formData,
                    dataType: 'json',
                    success: function(response) {
                        var verifyText = response.message;
                        $('#noticeMsg').html(verifyText).show();

                        toastNotify('success', verifyText);



                        var url = '{{ route('user.dashboard') }}';
                        window.location.href = url;

                    },
                    error: function(xhr, status, error) {
                        $('#registerBtn').show();
                        var errors = xhr.responseJSON.errors;

                        if (errors) {
                            $.each(errors, function(field, messages) {
                                var fieldErrors = '';
                                $.each(messages, function(index, message) {
                                    fieldErrors += message + '<br>';
                                });

                                toastNotify('error', fieldErrors);

                            });
                        } else {
                            toastNotify('error', 'An error occured, please try again later');

                        }


                    },

                    complete: function() {
                        clicked.removeClass('disabled');
                        clicked.find('.button-spinner').remove();
                        clicked.prop('disabled', false);

                        //custom styling
                        clicked.removeClass('disabled-button');
                        clicked.addClass(
                            'bg-sky-800 hover:bg-gray-600'
                        );

                    }

                });
            });
        });
    </script>

    {{-- <script>
        ////// Concatenate all input values
        $(document).ready(function() {
            $('.otp-input').on('input', function() {
                let otpValue = '';

                // Concatenate all input values
                $('.otp-input').each(function() {
                    otpValue += $(this).val();
                });

                // Set the hidden input value
                $('#otp').val(otpValue);
            });
        });


        $(document).ready(function() {
            const $inputs = $(".otp-input");

            $inputs.on("input", function(e) {
                const $this = $(this);
                const value = $this.val();

                if (value.length === 1) {
                    $this.next(".otp-input").focus();
                }
            });

            $inputs.on("keydown", function(e) {
                const $this = $(this);

                if (e.key === "Backspace" && !$this.val()) {
                    $this.prev(".otp-input").focus();
                }
            });

            $inputs.on("paste", function(e) {
                const pasteData = e.originalEvent.clipboardData.getData('text').slice(0, 4);

                $inputs.each(function(index) {
                    $(this).val(pasteData[index] || "");
                });
                $inputs.eq(pasteData.length).focus();
                e.preventDefault();
            });
        });
    </script> --}}

    <script>
        ////// Concatenate all input values
        $(document).ready(function() {
            $('.otp-input').on('input', function() {
                let otpValue = '';

                // Concatenate all input values
                $('.otp-input').each(function() {
                    otpValue += $(this).val();
                });

                // Set the hidden input value
                $('#otp').val(otpValue);
            });
        });


        $(document).ready(function() {
            const $inputs = $(".otp-input");

            $inputs.on("input", function(e) {
                const $this = $(this);
                const value = $this.val();

                // Allow only 1 character
                if (value.length > 1) {
                    $this.val(value.charAt(0)); // Keep only the first character
                }

                // Move focus to the next input if a character is entered
                if (value.length === 1) {
                    $this.next(".otp-input").focus();
                }
            });

            $inputs.on("keydown", function(e) {
                const $this = $(this);

                if (e.key === "Backspace" && !$this.val()) {
                    $this.prev(".otp-input").focus();
                }
            });

            $inputs.on("paste", function(e) {
                const pasteData = e.originalEvent.clipboardData.getData('text').slice(0, $inputs.length);

                // Fill inputs with pasted data, ensuring only one character per input
                $inputs.each(function(index) {
                    $(this).val(pasteData[index] || "");
                });

                // Focus on the next input after the last pasted character
                $inputs.eq(pasteData.length).focus();
                e.preventDefault();
            });
        });
    </script>
@endsection
