@extends('layouts.user_registration_layout')
@section('content')
    <section class="auth-page">
        <div class="auth-container">
            <div class="left-div">
                <a href="/" class="close"><img src="{{ asset('frontend/assets/images/close-icon-red.svg') }}"></a>
                <div class="inner-div">
                    <ul class="nav nav-tabs">
                        <li class="current-state">
                            <a data-toggle="tab" href="#details-tab" class="">
                                <small>
                                    <div></div>
                                </small>
                                <strong>Details</strong>
                            </a>
                        </li>

                        <li class="incomplete-state">
                            <a data-toggle="tab" href="#verification-tab">
                                <small>
                                    <div></div>
                                </small>
                                <strong>Verification</strong>
                            </a>
                        </li>
                    </ul>
                    <form class="m-form m-form--state" name="frm-create" id="frm-create" method="post"
                        action="{{ route('user-registration') }}" enctype="multipart/form-data">
                        @csrf

                        <div class="tab-content">
                            <div id="details-tab" class="tab-pane fade active show">

                                <div class="row">
                                    <div class="col-12 col-md-12">
                                        <div class="form-group">
                                            <label>Full Name</label>
                                            <div class="input-with-right-icon">
                                                <input type="text" placeholder="" id="full-name" class="form-control"
                                                    name="name" required>

                                                <span class="right-icon name-tick" style="display: none"><img
                                                        src="{{ asset('frontend/assets/images/verify-tick-green.svg') }}"></span>
                                                <span class="right-icon name-cross" style="display: none"><img
                                                        src="{{ asset('frontend/assets/images/close-icon-red.svg') }}"></span>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-12">
                                        <div class="form-group">
                                            <label>Email Address</label>
                                            <div class="input-with-right-icon">
                                                <input type="text" placeholder="" class="form-control" id="email"
                                                    name="email" required>
                                                <span class="right-icon email-tick" style="display: none"><img
                                                        src="{{ asset('frontend/assets/images/verify-tick-green.svg') }}"></span>
                                                <span class="right-icon email-cross" style="display: none"><img
                                                        src="{{ asset('frontend/assets/images/close-icon-red.svg') }}"></span>
                                                <span class="email_err" style="color:red"></span>   
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <div class="col-12 col-md-12">
                                <div class="form-group">
                                    <label>Mobile Number</label>
                                    <div class="input-with-right-icon">
                                        <input type="text" placeholder=""  name="phone_number[main]"  class="form-control"  required>
                                        <span class="right-icon phone-tick" style="display: none"><img src="{{ asset('frontend/assets/images/verify-tick-green.svg') }}"></span>
                                        <span class="right-icon phone-cross" style="display: none"><img src="{{ asset('frontend/assets/images/close-icon-red.svg') }}"></span>
                                    </div>
                                </div>
                            </div> --}}

                                    <div class="col-12 col-md-12">
                                        <div class="form-group">
                                            <label for="phone">phone</label>
                                            <div class="input-with-right-icon">
                                                <input type="hidden" id="country_code">
                                                <input id="phone" type="text" class="phone-field" required>
                                                <span class="hide" id="valid-msg"><img
                                                        src="{{ asset('frontend/assets/images/verify-tick-green.svg') }}"></span>
                                                <span id="error-msg" class="hide" style="color: red;"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-12">
                                        <div class="form-group">
                                            <label>Password</label>
                                            <div class="input-with-right-icon">
                                                <input type="password" placeholder="" class="form-control" id="password"
                                                    minlength="8" name="password" autofocus="" required>

                                                {{-- <button type="button" class="right-icon"><img
                                                        src="{{ asset('frontend/assets/images/eye-icon.svg') }}"
                                                        id="togglePassword"></button> --}}
                                               

                                            <i class="bi bi-eye-slash right-icon " id="togglePassword" style="cursor: pointer"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-12">
                                        <div class="form-group">
                                            <label>Confirm Password</label>
                                            <div class="input-with-right-icon">
                                                <input type="password" placeholder="" class="form-control" minlength="8"
                                                    id="confirm_password" name="confirm_password" required>

                                                {{-- <button type="button" class="right-icon"><img
                                                        src="{{ asset('frontend/assets/images/eye-icon.svg') }}"
                                                        id="toggleConfirmPassword"></button> --}}
                                               <i class="bi bi-eye-slash right-icon " id="toggleConfirmPassword" style="cursor: pointer"></i>
                                              
                                            </div>
                                            <span id="confirm_password_msg"></span>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-12">
                                        <div class="form-group">
                                            <div class="checkagree-with-label">
                                                <div class="checkagree">
                                                    <input type="checkbox" class="custom-checkbox-s1" required>
                                                </div>
                                                <label>By Continuing you agree to our <a href="#">Terms and
                                                        Conditions, Privacy policy</a> and <a href="#">Cookie
                                                        Notice</a></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-12">
                                        <div class="form-group">
                                            <div class="submit-actions">
                                                <button type="submit" id="saveData"
                                                    class="submit-btn theme-solid-btn">Register <img
                                                        src="{{ asset('frontend/assets/images/right-arow-white-icon.svg') }}"></button>
                                            </div>
                                        </div>
                                    </div>
                    </form>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <div class="auth-more-text">
                                Already have an account? <a href="/login">Log in</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="verification-tab" class="tab-pane fade">
                verification-tab
            </div>
        </div>
        </div>
        </div>
        <div class="right-div">
            <figure>
                <div class="auth-logo">
                    <img src="{{ asset('frontend/assets/images/logo-white.svg') }}" alt="">
                </div>
                <figcaption>
                    <h3>TransCash Solution inc</h3>
                    <p>Is an international money transfer company reliable, credible, secure, fast and at less cost. Use our
                        services for your international transfers without wasting time.</p>
                </figcaption>
            </figure>
        </div>
        </div>
    </section>
@endsection
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.21/css/intlTelInput.css"
    integrity="sha512-gxWow8Mo6q6pLa1XH/CcH8JyiSDEtiwJV78E+D+QP0EVasFs8wKXq16G8CLD4CJ2SnonHr4Lm/yY2fSI2+cbmw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.21/js/intlTelInput.min.js"
    integrity="sha512-x1RjK1QHIg0CA4lP7CFG98UXDy04pYBPuepiMd4bkJ7sqEfAPHNmVbkBxVDG3zpnolqMX2cd1mX13HlvwZfA8w=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js">
</script>


<script>
    window.addEventListener("DOMContentLoaded", function() {
        const togglePassword = document.querySelector("#togglePassword");
        const toggleConfirmPassword = document.querySelector("#toggleConfirmPassword");


        togglePassword.addEventListener("click", function(e) {
            // toggle the type attribute
            console.log('password toggle');
            const type =
                password.getAttribute("type") === "password" ? "text" : "password";
            password.setAttribute("type", type);
            // toggle the eye / eye slash icon
           
            this.classList.toggle("bi-eye");
        });
        toggleConfirmPassword.addEventListener("click", function(e) {
            // toggle the type attribute
            const type =
                confirm_password.getAttribute("type") === "password" ? "text" : "password";
            confirm_password.setAttribute("type", type);
            // toggle the eye / eye slash icon
            this.classList.toggle("bi-eye");
            
        });

        //$('#fullname_error').hide();
        //$('#email_error').hide();
        //$('#phone_error').hide();

        $('#full-name').focusout(function() {
            name_validate();
        });

        function name_validate() {
            var name = $('#full-name').val();
            if (name !== '') {
                $('.name-tick').css('display', 'block');
                $('.name-cross').css('display', 'none');
                $("#saveData").removeAttr('disabled');
            } else {
                $("#saveData").prop("disabled", true);
                $('.name-tick').css('display', 'none');
                $('.name-cross').css('display', 'block');
            }
        }

        $('#email').focusout(function() {
            email_validator();

        });



        function email_validator() {
            var pattern = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            var email = $('#email').val();

            if (email !== '') {
                if (pattern.test(email)) {
                    $('.email-tick').css('display', 'block');
                    $('.email-cross').css('display', 'none');
                    $("#saveData").removeAttr('disabled');

                } else {
                    $("#saveData").prop("disabled", true);
                    $('.email-tick').css('display', 'none');
                    $('.email-cross').css('display', 'block');
                }
            } else {
                $("#saveData").prop("disabled", true);
                $('.email-tick').css('display', 'none');
                $('.email-cross').css('display', 'block');
            }
        }
        // var phone_number = window.intlTelInput(document.querySelector("#phone_number"), {
        //     separateDialCode: true,
        //     preferredCountries:["us"],
        //     hiddenInput: "full",
        //     utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js"
        // });

        $('#phone_number').focusout(function() {
            phone_validator();

        });

        // var input = document.querySelector('#phone_number');
        // var iti = window.intlTelInputGlobals.getCountryData(input);
        // var countryData = iti.getSelectedCountryData();
        // var dialCode = countryData["dialCode"];
        // console.log(dialCode);



        var input = document.querySelector("#phone"),
            errorMsg = document.querySelector("#error-msg"),
            country_code = document.querySelector('#country_code'),
            validMsg = document.querySelector("#valid-msg");

        var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
        var iti = window.intlTelInput(input, {
            separateDialCode: true,
            preferredCountries: ["in"],
            hiddenInput: "full",
            utilsScript: "//cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js",
        });

        var reset = function() {
            input.classList.remove("error");
            errorMsg.innerHTML = "";
            errorMsg.classList.add("hide");
            validMsg.classList.add("hide");
        }

        input.addEventListener('blur', function() {
            reset();
            var countryCode = $('.iti__selected-flag').attr('title');
            var countryCode = countryCode.replace(/[^0-9]/g, '');
            var data = '+' + countryCode;
            country_code.value = data;

            if (input.value.trim()) {
                if (iti.isValidNumber()) {
                    validMsg.classList.remove("hide");
                    $("#saveData").removeAttr('disabled');
                } else {
                    $("#saveData").prop("disabled", true);
                    input.classList.add("error");
                    var errorCode = iti.getValidationError();
                    errorMsg.innerHTML = errorMap[errorCode];
                    errorMsg.classList.remove("hide");
                }
            }
        });

        input.addEventListener('change', reset);
        input.addEventListener("keyup", reset);



    });


    // Password & confirm password Check 

    $(document).ready(function() {

        $("#confirm_password").bind('keyup change', function() {

            check_Password($("#password").val(), $("#confirm_password").val())


        })



        $('#frm-create').submit(function(e) {
            console.log(e);
            e.preventDefault();
            var _token = $("input[name='_token']").val();
            var name = $('#full-name').val();
            var email = $('#email').val();
            var phone = $('#phone').val();
            var country_code = $('#country_code').val();
            var password = $('#password').val();

            $.ajax({
                url: "{{ route('user-registration') }}",
                type: "POST",
                data: {
                    _token: _token,
                    email: email,
                    name: name,
                    phone: phone,
                    country_code: country_code,
                    password: password
                },
                success: function(data) {
                    console.log(data);
                    if ($.isEmptyObject(data.error)) {
                        localStorage.removeItem('access_token');
                        localStorage.setItem('access_token', data.user_access_token);
                        $url = '/user-verification';
                        console.log($url);
                        $('.email_error').text('');
                        swal({
                            title: "Wow!",
                            text: "Your account has been created successfully, Please Verify!",
                            type: "success"
                        }).then(function() {
                            window.location.href = $url;
                        });


                    } else {
                        printErrotMsg(data.error);
                    }
                }
            })


        })

    });

    function printErrotMsg(msg) {
        $.each(msg, function(key, value) {
            $('.' + key + '_err').text(value);
            $('.email-cross').css('display', 'block');
            $('.email-tick').css('display', 'none');

        })
    }

    function check_Password(Pass, Con_Pass) {

        if (Pass === "") {



        } else if (Pass === Con_Pass) {

            $("#saveData").removeAttr('disabled');
            $('#confirm_password_msg').show()
            $("#confirm_password_msg").html('<div class="alert alert-success">Password matched</div>')

            setTimeout(function() {
                $('#confirm_password_msg').fadeOut('slow');
            }, 3000);

        } else {
            $("#saveData").prop("disabled", true);
            $("#confirm_password").focus()
            $('#confirm_password_msg').show()
            $("#confirm_password_msg").html('<div class="alert alert-danger">Password didnot matched</div>')

            setTimeout(function() {
                $('#confirm_password_msg').fadeOut('slow');
            }, 3000);

        }

    }
</script>

<style>
    .hide {
        display: none;
    }

    .phone-field {
        border-bottom: 1px solid black;

    }
</style>