@extends('shop::layouts.master')

@push('pageTitle')
    {{ __('shop::app.navicons.register') }}
@endpush

@section('content-wrapper')
    <div class="auth-content form-container register">
        <div class="container">
            <div class="col-lg-10 offset-lg-1 col-md-8 mx-auto">
                <div class="heading">
                    <h2 class="fs24 fw6">
                        {{ __('velocity::app.customer.signup-form.user-registration') }}
                    </h2>

                    <a href="{{ route('customer.session.index') }}" class="btn-new-customer">
                        <button type="button" class="theme-btn">
                            {{ __('velocity::app.customer.signup-form.login') }}
                        </button>
                    </a>
                </div>

                <div class="body col-12">
                    <h3 class="fw6">
                        {{ __('velocity::app.customer.signup-form.become-user') }}
                    </h3>

                    <p class="fs16">
                        {{ __('velocity::app.customer.signup-form.form-sginup-text') }}
                    </p>

                    {!! view_render_event('bagisto.shop.customers.signup.before') !!}

                    <form id="sign-up-form" method="post" action="{{ route('customer.register.create') }}">

                        {{ csrf_field() }}

                        <input type="hidden" name="phoneCountryCode" id="phoneCountryCode">

                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.before') !!}

                        <div class="control-group" :class="[errors.has('first_name') ? 'has-error' : '']">
                            <label for="first_name" class="required label-style">
                                {{ __('shop::app.customer.signup-form.firstname') }}
                            </label>

                            <input type="text" class="form-style" name="first_name" v-validate="'required'"
                                value="{{ old('first_name') }}"
                                data-vv-as="&quot;{{ __('shop::app.customer.signup-form.firstname') }}&quot;" />

                            <span class="control-error" v-if="errors.has('first_name')"
                                v-text="errors.first('first_name')"></span>
                        </div>

                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.firstname.after') !!}

                        <div class="control-group" :class="[errors.has('last_name') ? 'has-error' : '']">
                            <label for="last_name" class="required label-style">
                                {{ __('shop::app.customer.signup-form.lastname') }}
                            </label>

                            <input type="text" class="form-style" name="last_name" v-validate="'required'"
                                value="{{ old('last_name') }}"
                                data-vv-as="&quot;{{ __('shop::app.customer.signup-form.lastname') }}&quot;" />

                            <span class="control-error" v-if="errors.has('last_name')"
                                v-text="errors.first('last_name')"></span>
                        </div>

                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.lastname.after') !!}

                        <div class="control-group" :class="[errors.has('email') ? 'has-error' : '']">
                            <label for="email" class="required label-style">
                                {{ __('shop::app.customer.signup-form.email') }}
                            </label>

                            <input type="email" class="form-style" name="email" v-validate="'required|email'"
                                value="{{ old('email') }}"
                                data-vv-as="&quot;{{ __('shop::app.customer.signup-form.email') }}&quot;" />

                            <span class="control-error" v-if="errors.has('email')" v-text="errors.first('email')"></span>
                        </div>

                        <div class="control-group" :class="[errors.has('phone') ? 'has-error' : '']">
                            <label for="phone" class="required">{{ __('contact_lang::app.shop.phone-number') }}</label>
                            <input type="text"
                                @if (isset($locale->direction) && $locale->direction == 'ltr') size="64" @else size="36" style="text-align:left" @endif
                                class="form-control mb-2 inptFielsd" id="phone" name="phone"
                                v-validate="'required|numeric'">
                            <span class="control-error" v-if="errors.has('phone')">{{ __('contact_lang::app.error.phone') }}</span>
                            <span id="itiVerification" class="control-error"></span>
                        </div>


                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.email.after') !!}

                        <div class="control-group" :class="[errors.has('password') ? 'has-error' : '']">
                            <label for="password" class="required label-style">
                                {{ __('shop::app.customer.signup-form.password') }}
                            </label>

                            <input type="password" class="form-style" name="password" v-validate="'required|min:6'"
                                ref="password" value="{{ old('password') }}"
                                data-vv-as="&quot;{{ __('shop::app.customer.signup-form.password') }}&quot;" />

                            <span class="control-error" v-if="errors.has('password')"
                                v-text="errors.first('password')"></span>
                        </div>

                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.password.after') !!}

                        <div class="control-group" :class="[errors.has('password_confirmation') ? 'has-error' : '']">
                            <label for="password_confirmation" class="required label-style">
                                {{ __('shop::app.customer.signup-form.confirm_pass') }}
                            </label>

                            <input type="password" class="form-style" name="password_confirmation"
                                v-validate="'required|min:6|confirmed:password'"
                                data-vv-as="&quot;{{ __('shop::app.customer.signup-form.confirm_pass') }}&quot;" />

                            <span class="control-error" v-if="errors.has('password_confirmation')"
                                v-text="errors.first('password_confirmation')"></span>
                        </div>

                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.password_confirmation.after') !!}

                        <div class="control-group">

                            {!! Captcha::render() !!}

                        </div>

                        @if (core()->getConfigData('customer.settings.newsletter.subscription'))
                            <div class="control-group">
                                <input type="checkbox" id="checkbox2" name="is_subscribed">
                                <span>{{ __('shop::app.customer.signup-form.subscribe-to-newsletter') }}</span>
                            </div>
                        @endif

                        {!! view_render_event('bagisto.shop.customers.signup_form_controls.after') !!}

                        <button class="theme-btn" type="submit">
                            {{ __('shop::app.customer.signup-form.title') }}
                        </button>
                    </form>

                    {!! view_render_event('bagisto.shop.customers.signup.after') !!}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {!! Captcha::renderJS() !!}
    <script>
        $(document).ready(function() {
            setTimeout(() => {
                var input = document.querySelector("#phone");
                window.intlTelInput(input, {
                    allowDropdown: true,
                    onlyCountries: ["{{ core()->countries(true)[0]->code }}"],
                    separateDialCode: true,
                    customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
                        return selectedCountryPlaceholder.replace(/\s/g, '');
                    }
                });
                
                $("#sign-up-form").submit(function(e) {
                    e.preventDefault();

                    var iti = window.intlTelInputGlobals.getInstance(input);
                    var isValid = iti.isValidNumber(); // Check if the phone number is valid
                    
                    if (isValid) {
                        var countryCode = iti.getSelectedCountryData().dialCode;
                        var tel         = document.getElementById('phone').value;
                        $('input[name="phoneWithCountryCode"]').val(countryCode + tel);
                        
                        $('#itiVerification').hide();
                        console.log("Valid phone number");
                        
                        // Submit Form
                        $(this).unbind('submit').submit();
                    } else {
                        // The phone number is not valid, handle accordingly
                        console.log("Invalid");
                        // Remove existing span if it exists
                        if ($('#itiVerification').length > 0) {
                            $('#itiVerification').remove();
                        }
                        
                        var spanElement = $('<span>', {
                            id: 'itiVerification',
                            class: 'control-error',
                            text: '{{ __("saas::app.tenant.registration.invalid-phone") }}'
                        });

                        // Append the span element to the parent of the input element
                        $(input).closest('.control-group').append(spanElement);
                        spanElement.show();
                    }
                });
            }, 2000);
        });
    </script>
@endpush