@extends('themes.frontend.layouts.app-popup')
@section('validate') @stop
@section('content')
    <div class="fancybox-popup login-and-register-form">
        <div class="main-register fl-wrap pb-0">
            <div id="tabs-container">
                <div class="tab">
                    <div id="tab-1" class="tab-contents">
                        <div class="text-center">
                            <h3 class="text-center mb-0">{!! $model->title !!}</h3>
                            {!! $model->description !!}
                        </div>
                        <div class="custom-form">
                            <form action="{{ module_url('web.signup.submit') }}" method="POST" name="signup_form"
                                id="signup_form" class="main-register-form">
                                {{ csrf_field() }}
                                <x-form.field.hidden name="recaptcha_v3" id="recaptcha_v3" />

                                <div class="form-group">
                                <label for="email">Your Email Address * </label>
                                <x-form.field.web.text type="email" name="email" />
                                <div class="invalid-feedback" data-error="email"></div>
                                </div>

                                <div class="form-group password-wrapper">
                                <label for="password">Choose Password *</label>
                                <x-form.field.web.text type="password" name="password" class="js-password" />
                                <span class="cursor-pointer js-toggle-password">
                                    <i class="fa fa-eye"></i>
                                </span>
                                <div class="invalid-feedback" data-error="password"></div>
                                </div>

                                <div class="form-group">
                                <label for="username">Username *</label>
                                <x-form.field.web.text name="username" />
                                <div class="invalid-feedback" data-error="username"></div>
                                </div>

                                <div class="row" id="type">
                                    <div class="col-6 error-container">
                                        <span class=" filter-tags box mt-0 mb-1">
                                            <input type="radio" name="type" id="type_1" value="client">
                                            <label for="type_1"> Client (View Ads)</label>
                                        </span>
                                    </div>
                                    <div class="col-6">
                                        <span class=" filter-tags box mt-0 mb-1">
                                            <input type="radio" name="type" id="type_2" value="advertiser">
                                            <label for="type_2"> Advertiser (Post Ads)</label>
                                        </span>
                                    </div>
                                    <div class="invalid-feedback" data-error="type"></div>
                                </div>

                                <x-form.field.web.button type="button" id="submit_signup_form" name="submit_signup_form"
                                    text="{{ __('auth.web.signup.submit_btn_txt') }}" showIcon="true" />
                                <div class="clearfix"></div>
                                <br>

                                <p class="text-small text-center">You are agree to our <strong>Rules</strong>,
                                    <strong>Terms & Conditions</strong>, <strong>Community Safety Policy</strong> and
                                    <strong>Privacy Policy</strong>
                                </p>
                                
                                <div class="clearfix"></div>

                                <div id="msg_id" class="error-msg"></div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        // View Password
        document.addEventListener('click', function (e) {

            const toggle = e.target.closest('.js-toggle-password');
            if (!toggle) return;

            const wrapper = toggle.closest('.password-wrapper');
            const input = wrapper.querySelector('.js-password');
            const icon = toggle.querySelector('i');

            const isPassword = input.type === 'password';

            input.type = isPassword ? 'text' : 'password';

            icon.classList.toggle('fa-eye', !isPassword);
            icon.classList.toggle('fa-eye-slash', isPassword);
        });

        // Form work.
        $(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $("#signup_form").validate({
                    rules: {
                        email: {
                            required: true,
                            email: true
                        },
                        password: {
                            required: true,
                            minlength: 8
                        },
                        username: {
                            required: true,
                            minlength: 6
                        },
                        type: {
                            required: true
                        }
                    },
                    messages: {
                        email: {
                            required: "Please enter an email address",
                            email: "Please enter a valid email address"
                        },
                        password: {
                            required: "Please enter a password",
                            minlength: "The password must be at least 8 characters.",
                        },
                        username: {
                            required: "Please enter a username",
                            minlength: "The username must be at least 6 characters.",
                        },
                        type: "Please choose an account type"
                    },
                    errorPlacement: function(error, element) {
                        if (element.is(":radio")) {
                            error.appendTo(element.parents('.error-container'));
                        } else {
                            error.insertAfter(element);
                        }
                    }
                }),
                $("#submit_signup_form").click(function(e) {
                    e.preventDefault();

                    // Clear old errors
                    $('.is-invalid').removeClass('is-invalid');
                    $('.invalid-feedback').text('').hide();

                    grecaptcha.ready(function() {
                        grecaptcha.execute("{{ config('commonconstants.recaptcha.site_key') }}", {
                            action: 'signup_form'
                        }).then(function(token) {
                            var a = $("#signup_form");
                            if (1 == a.valid()) {
                                // alert(token);
                                if (token) {
                                    $("#recaptcha_v3").val(token);
                                    // alert($("#service").val());exit();
                                    var formData = new FormData();
                                    formData.append('recaptcha_v3', $("#recaptcha_v3").val());
                                    formData.append('email', $("#email").val());
                                    formData.append('password', $("#password").val());
                                    formData.append('username', $("#username").val());
                                    formData.append('type', $('input[name="type"]:checked')
                                    .val());
                                    $.ajax({
                                        url: "{{ module_url('web.signup.submit') }}",
                                        type: "post",
                                        data: formData,
                                        contentType: false,
                                        processData: false,
                                        dataType: 'json',
                                        beforeSend: function() {
                                            $('#submit_signup_form').prop(
                                                'disabled', true);
                                            $("#submit_signup_form").text(
                                                "{{ __('enquiries.button.processing_txt') }}"
                                            );
                                        },
                                        success: function(data) {
                                            // console.log(data);
                                            // alert(data['msg']);
                                            $('#submit_signup_form').prop(
                                                'disabled', false);
                                            $("#submit_signup_form").text(
                                                "{{ __('auth.web.signup.submit_btn_txt') }}"
                                            );
                                            $("#msg_id").html(data['msg']);
                                            if (data['url'] != '') {
                                                // window.location.href = data['url'];
                                                if (window.parent) {
                                                    // Close Fancybox
                                                    if (window.parent.Fancybox) {
                                                        window.parent.Fancybox
                                                            .getInstance().close();
                                                    }
                                                    // Reload parent
                                                    window.parent.location.href =
                                                        data['url'];
                                                }
                                            }
                                        },
                                        error: function(xhr) {
                                            // console.log(xhr);
                                            if (xhr.status === 422) {
                                                $('.is-invalid').removeClass(
                                                    'is-invalid');
                                                $('.invalid-feedback').text('')
                                                    .hide();

                                                $.each(xhr.responseJSON.errors,
                                                    function(field, messages) {
                                                        if (field === 'type') {
                                                            $('[data-error="type"]')
                                                                .text(messages[
                                                                    0]).show();
                                                        } else {
                                                            let input = $(
                                                                '[name="' +
                                                                field + '"]'
                                                                );

                                                            input.addClass(
                                                                'is-invalid'
                                                                );

                                                            $('[data-error="' +
                                                                    field + '"]'
                                                                    ).text(
                                                                    messages[0])
                                                                .show();
                                                        }
                                                    });

                                                $('#submit_signup_form').prop(
                                                    'disabled', false);
                                                $("#submit_signup_form").text(
                                                    "{{ __('auth.web.signup.submit_btn_txt') }}"
                                                );
                                            } else {
                                                $("#msg_id").html(
                                                    "<p>{{ __('enquiries.error.form_submit') }}</p>"
                                                );
                                            }
                                        }
                                    });
                                }
                            }
                        });
                    });
                });
        });
    </script>
@endpush