@extends('layouts.app')
@section('content')
@push('styles')
    <style>
        /* html {
            min-height: 100%;
            display: grid;
        }

        body {
            margin: auto;
        }     */

        .required .col-form-label:after {
        content:"*";
        color:red;
        }

        input[type=number]::-webkit-inner-spin-button, 
        input[type=number]::-webkit-outer-spin-button { 
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            margin: 0; 
        }
    </style>
@endpush
<div class="container" style="margin-top: 100px;">
    <div class="row justify-content-center">
        {{-- <div class="col-md-5">
            <img src="{{ asset('images/login.png') }}" height="380px" width="450px" style="margin-top: -40px; margin-right: 150px;"/>
        </div> --}}
        <div class="col-md-7">
            <div class="card">
                <div class="card-header text-white text-center" style="background: #000000;color: #f0ac63 !important;"><b>{{ __('Register as User') }}</b></div>

                <div class="card-body">
                    @if (session('message'))
                        <div class="alert {{ Session::get('alert-class','alert-danger') }}" role="alert">
                            {{ session('message') }}
                        </div>
                    @endif
                    <div class="alert alert-danger d-none" role="alert" id="mailerror">
                            
                    </div>
                    <form id="register_form" action="#">
                        {{-- @csrf --}}
                        <div class="row mb-3 g-3">
                            <input type="hidden" name="social_provider_type" value="{{@$social_data['social_provider_type'] }}" id="social_provider_type">
                            <input type="hidden" name="social_provider_id" value="{{ @$social_data['social_provider_id'] }}" id="social_provider_id">
                            <div class="col-md-6 form-group">
                                <label for="first_name" class=" col-form-label text-md-end required" style="color: #000000;">{{ __('First Name') }}</label> <span class="text-danger">*</span>
                                <input id="first_name"  class="form-control @error('first_name') is-invalid @enderror" name="first_name" value="{{ old('first_name',@$social_data['firstname']) }}" required autocomplete="email" autofocus placeholder="First Name">
                                @error('first_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="last_name" class=" col-form-label text-md-end required" style="color: #000000;">{{ __('Last Name') }}</label> <span class="text-danger">*</span>
                                <input id="last_name"  class="form-control @error('last_name') is-invalid @enderror" name="last_name" value="{{ old('last_name',@$social_data['lastname']) }}" required autocomplete="email" autofocus placeholder="Last Name">
                                @error('last_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                        
                            <div class="col-md-12">
                                <label for="email" class=" col-form-label text-md-end" style="color: #000000;">{{ __('Email Address') }}</label> <span class="text-danger">*</span>
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email',@$social_data['email']) }}" required autocomplete="email" autofocus placeholder="Email">

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="password" class=" col-form-label text-md-end" style="color: #000000;">{{ __('Password') }}</label> <span class="text-danger">*</span>
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password" placeholder="password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="password" class=" col-form-label text-md-end" style="color: #000000;">{{ __('Confirm Password') }}</label> <span class="text-danger">*</span>
                                <input id="confirm_password" type="password" class="form-control @error('confirm_password') is-invalid @enderror" name="confirm_password" required autocomplete="confirm_password" placeholder="Confirm Password">

                                @error('confirm_password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>


                            <div class="col-md-6">
                                <label for="company" class=" col-form-label text-md-end required" style="color: #000000;">{{ __('Company') }}</label> <span class="text-danger">*</span>
                                <input id="company"  class="form-control @error('company') is-invalid @enderror" name="company" value="{{ old('company') }}" required placeholder="Company">
                                <div id="product_list"></div>
                                @error('company')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="title" class=" col-form-label text-md-end required" style="color: #000000;">{{ __('Job Title') }}</label> <span class="text-danger">*</span>
                                <input id="title"  class="form-control @error('title') is-invalid @enderror" name="title" value="{{ old('title') }}" required autocomplete="title" autofocus placeholder="Job Title">
                                @error('title')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="country_code" class="col-form-label text-md-end required">Country Code <span class="text-danger "style="font-size: 13px;">Default considered as US (+1)</span></label>
                                    <select id='country_code' name="country_code" class="form-control">
                                        @foreach($country as $short_code => $short_name)
                                        <option value="{{$short_code}}" {{ $short_code ==  ((isset($appUser) && !empty($appUser->country_code)) ? $appUser->country_code : 'US') ?  'selected' : ''}}>{{$short_name}}</option>
                                        @endforeach
                                    </select>
                                    @if($errors->has('country_code'))
                                    <div class="error">{{ $errors->first('country_code') }}</div>
                                    @endif
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label for="phone_no" class=" col-form-label text-md-end required" style="color: #000000;">{{ __('Phone') }}</label> <span class="text-danger">*</span>
                                <input id="phone_no" type="text" minlength="10" maxlength="10" class="form-control @error('phone_no') is-invalid @enderror" name="phone_no" value="{{ old('phone_no') }}" required autocomplete="phone_no" autofocus placeholder="Phone">
                                @error('phone_no')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="business_interests" class=" col-form-label text-md-end required" style="color: #000000;">{{ __('Business Interests') }}</label>
                                <select class="js-example-basic-multiple form-control" id="business_interests" name="business_interests[]" multiple="multiple">
                                    <option value="">Select Business Interests</option>
                                    @foreach ($industry as $item)
                                        <option value="{{$item->interest_id}}">{{$item->interest_name}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label for="mailing_address" class=" col-form-label text-md-end required" style="color: #000000;">{{ __('Mailing Address') }}</label> <span class="text-danger"></span>
                                <textarea id="mailing_address" class="form-control @error('mailing_address') is-invalid @enderror" name="mailing_address" value="{{ old('mailing_address') }}" autocomplete="mailing_address" autofocus placeholder="Mailing Address"> </textarea>
                                @error('mailing_address')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="assistant_name" class=" col-form-label text-md-end required" style="color: #000000;">{{ __('Assistant Name') }}(optional)</label>
                                <input id="assistant_name"  class="form-control " name="assistant_name" value="{{ old('assistant_name') }}" placeholder="Assistant Name">
                                
                            </div>

                

                            <div class="col-md-6">
                                <label for="assistant_email" class=" col-form-label text-md-end required" style="color: #000000;">{{ __('Assistant Email') }}</label> <span class="text-danger"></span>
                                <input id="assistant_email" type="email"  class="form-control @error('assistant_email') is-invalid @enderror" name="assistant_email" value="{{ old('assistant_email') }}" placeholder="Assistant Email">
                                 @error('assistant_email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror 
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="country_code" class="col-form-label text-md-end required">Assistant Country Code <span class="text-danger"style="font-size: 13px;">Default considered as US (+1)</span></label>
                                    <select id='assistant_country_code' name="assistant_country_code" class="form-control">
                                        @foreach($country as $short_code => $short_name)
                                        <option value="{{$short_code}}" {{ $short_code ==  ((isset($appUser) && !empty($appUser->assistant_country_code)) ? $appUser->assistant_country_code : 'US') ?  'selected' : ''}}>{{$short_name}}</option>
                                        @endforeach
                                    </select>
                                    @if($errors->has('assistant_country_code'))
                                    <div class="error">{{ $errors->first('assistant_country_code') }}</div>
                                    @endif
                                </div>
                            </div>

                            <div class="col-md-6">
                                <label for="assistant_phone_no" class=" col-form-label text-md-end required" style="color: #000000;">{{ __('Assistant Phone ') }}</label> <span class="text-danger"></span>
                                <input id="assistant_phone_no" type="text" minlength="10" maxlength="10"  class="form-control @error('assistant_phone_no') is-invalid @enderror" name="assistant_phone_no" value="{{ old('assistant_phone_no') }}" placeholder="Assistant Phone">
                                 @error('assistant_phone_no')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror 
                            </div>

                            <div class="col-md-6">
                                <label for="birthday" class=" col-form-label text-md-end " style="color: #000000;">{{ __('Birthday') }}</label>
                                <input id="birthday" type="date"  class="form-control " name="birthday" max="{{date('Y-m-d')}}" value="{{ old('birthday') }}"  autocomplete="birthday">
                                {{-- @error('birthday')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror --}}
                            </div>
                            <div class="col-md-6">
                                <label for="referral_code" class=" col-form-label text-md-end " style="color: #000000;">{{ __('Referral Code') }}</label>
                                <input id="referral_code" type="text"  class="form-control " name="referral_code" max="{{date('Y-m-d')}}" value="{{ old('referral_code') }}">
                                @error('referral_code')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="spouse_name" class=" col-form-label text-md-end required" style="color: #000000;">{{ __('Spouse Name') }}</label>
                                <input id="spouse_name" class="form-control @error('spouse_name') is-invalid @enderror" name="spouse_name" value="{{ old('spouse_name') }}"  autocomplete="spouse_name" autofocus placeholder="Spouse Name">
                            </div>

                            <div class="col-md-6">
                                <label for="spouse_birthday" class=" col-form-label text-md-end " style="color: #000000;">{{ __('Spouse Birthday') }}</label>
                                <input id="spouse_birthday" type="date"  class="form-control " max="{{date('Y-m-d')}}" name="spouse_birthday" value="{{ old('spouse_birthday') }}"  autocomplete="spouse_birthday" autofocus placeholder="Spouse Birthday">
                                {{-- @error('spouse_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror --}}
                            </div>

                            <div class="col-md-6">
                                <label class="col-form-label text-md-end ">Children Name</label>
                                <input id="children_name"  class="form-control " name="children_name" value="{{ old('children') }}"  autocomplete="children" autofocus placeholder="Child Name">
                            </div>
                            <div class="col-md-6">
                                <label class="col-form-label text-md-end ">Children Birthday</label>
                                <input id="children_birthday" max="{{date('Y-m-d')}}" type="date"  class="form-control " name="children_birthday" value="{{ old('children_birthday') }}"  autocomplete="children_birthday" autofocus placeholder="Child Birthday">
                            </div>
                            <div class="col-md-12">
                                <button type="button"class="btn btn-primary" onclick="addCountryOption(); return false;">Add More Children</button>
                            </div>

                            <div class="col-md-6">
                                <div id="captcha">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <input type="text"  class="form-control " placeholder="Captcha" id="cpatchaTextBox"/>
                            </div>
                            <div id="process_type_div" class="col-12"> </div>
                            
                        </div>

                        

                        <div class="row mb-0">
                            <div class="col-md-12 text-center">
                                <button type="submit"  class="btn btn-primary" style="background: #000000;color:#DAA520">
                                    {{ __('Submit') }}
                                </button>
                            </div>
                            <div class="col-md-12 text-center mt-4">
                                <span>
                                    Already have an account?
                                    <a href="{{route('login')}}" style="color:#DAA520">
                                        {{ __('Back to Login') }}
                                    </a>
                                </span>
                                
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<style>
    .list{
        list-style-type: none;
    }
    .error{
        color: rgb(231, 134, 134);
    }
</style>
@push('child-scripts')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
{{-- <script src="https://code.jquery.com/jquery-3.6.0.js"></script> --}}
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/additional-methods.min.js"></script>
    <script type="text/javascript">
        var path = "{{ route('api.company.list') }}";

        var code , isValidCaptcha = true;;
        function createCaptcha() {
            //clear the contents of captcha div first 
            document.getElementById('captcha').innerHTML = "";
            var charsArray =
            "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@!#$%^&*";
            var lengthOtp = 6;
            var captcha = [];
            for (var i = 0; i < lengthOtp; i++) {
                //below code will not allow Repetition of Characters
                var index = Math.floor(Math.random() * charsArray.length + 1); //get the next character from the array
                if (captcha.indexOf(charsArray[index]) == -1)
                captcha.push(charsArray[index]);
                else i--;
            }
            var canv = document.createElement("canvas");
            canv.id = "captcha";
            canv.width = 100;
            canv.height = 50;
            var ctx = canv.getContext("2d");
            ctx.font = "25px Georgia";
            ctx.strokeText(captcha.join(""), 0, 30);
            //storing captcha so that can validate you can save it somewhere else according to your specific requirements
            code = captcha.join("");
            document.getElementById("captcha").appendChild(canv); // adds the canvas to the body element
        }
        function validateCaptcha() {
            event.preventDefault();
            debugger
            if (document.getElementById("cpatchaTextBox").value == code) {
                isValidCaptcha = true;
            }else{
                alert("Invalid Captcha. Please try again..");
                createCaptcha();
                isValidCaptcha = false;
            }
        }
        createCaptcha();


        $('#company').on('keyup', function() {
            var query = $(this).val();
            $.ajax({
                url: '{{ route('api.company.list') }}',
                type: 'post',
                data: {
                    query: query
                },
                success: function(data) {
                   var adddata=[];
                    // var agentHtml = '<ul class="list mb-0 py-2">';
                    $(data.data).each(function(index, value) {
                        adddata.push(value.company_name);
                        // agentHtml += '<li class="li-item" data-id="'+value.company_name+'"><span class="fw-normal d-block">'+value.company_name+'</span></li>';
                    });
                    $("#company").autocomplete({source:adddata});
                  
                    // agentHtml += '</ul>';
                    // $("#product_list").html(agentHtml);
                }
            })
        });

        // $('#company').typeahead({
        //     source: function (query, process) {
        //         return $.post(path, {
        //             query: query
        //         }, function (data) {
        //             var agentHtml = '<ul class="list mb-0 py-2">';
        //             $(data.data).each(function(index, value) {
        //                 console.log(value);
        //                 agentHtml += '<li class="li-item" data-id="'+value.company_name+'"><span class="fw-normal d-block">'+value.company_name+'</span></li>';
        //             });
        //             agentHtml += '</ul>';
        //             $("#product_list").html(agentHtml);
        //         });
        //     }
        // });

        // $(document).on('click', '.li-item', function() {
        //     var value = $(this).text();
        //     $('#company').val(value);
        //     $('#product_list').html('');
        // });
        $(document).ready(function() {
            $('.js-example-basic-multiple').select2();
        });
        var countryID = 0;
        function addCountryOption() {
            countryID = parseInt(countryID) + 1;
            var optionHtml = '<div class="row" id="process_type' + countryID + '">';
                optionHtml += '<div class="col-md-6">';
                    optionHtml += '<label class="col-form-label text-md-end ">Children Name</label>';
                    optionHtml +='<input id="children"class="form-control extrafield_name" name="children_name">';
                optionHtml += '</div>';
                optionHtml += '<div class="col-md-6">';
                    optionHtml += '<label class="col-form-label text-md-end ">Children Birthday</label>';
                    optionHtml +='<input id="" type="date"  class="form-control extrafield" name="children_birthday"max="{{date("Y-m-d")}}" >';
                optionHtml += '</div>';
                optionHtml += '<div class="col-md-12 mt-2 mb-2">';
                    optionHtml += '<button class="btn btn-danger" onclick="removeCountryOption(' + countryID + ')">Delete</button>';
                optionHtml += '</div>';  
                optionHtml += '</div>';
              
            $("#process_type_div").append(optionHtml);
        }

        function removeCountryOption(countryID) {
            $("#process_type" + countryID).remove();
        }

        $('#register_form').validate({
           
            rules: {
                
                first_name: {
                    required: true,
                    maxlength: 255,
                },
                last_name: {
                    required: true,
                    maxlength: 255,
                },
                company: {
                    required: true,
                    maxlength: 255,
                },
                email: {
                    required: true,
                    email: true,
                    maxlength: 255,
                },
                phone_no: {
                    required: true,
                    minlength: 10,
                    maxlength: 10,
                    digits: true,
                },
                password: {
                    required: true,
                    minlength: 8,
                    maxlength: 255,
                    pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
                },
                confirm_password: {
                    required: true,
                    maxlength: 255,
                    equalTo: "#password"
                },
                
                
                // first_name: "required",
                // last_name: "required",
                // email: {
                //     required: true,
                //     email: true
                // },
                // password: {
                //         required: true,
                //         minlength: 5,
                //         maxlength: 255,
                //         pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
                //     },
                // confim_password: {
                //     required: true,
                //     maxlength: 255,
                //     equalTo: "#password"
                // },
                // password: {
                //     required: true,
                //     minlength: 5
                // },
                // confirm_password: {
                //     required: true,
                //     minlength: 5,
                //     equalTo: "#password"
                // },
                // phone_no:{
                //     required: true,
                //     minlength: 10,
                //     digits: true,
                // },
                assistant_phone_no:{
                    // required: true,
                    minlength: 10,
                    digits: true,
                },
            },
            messages: {
                first_name: "Please enter first name",
                last_name: "Please enter last name",
                email: {
                    required: "Please enter email ",
                    email: "Your email address must be in the format of name@domain.com"
                },
                 password: {
                    required: 'Password required.',
                    minlength: 'Min 8 Character required',
                    pattern: "Password must have at least one uppercase letter, one lowercase letter, one digit, one special character",
                },
                confirm_password: {
                    required: 'Confirm Password required.',
                    equalTo: 'Password and confirm password not matched.'
                },
                // password:{
                //     required:'Please enter password',
                //     minlength:'Please enter at least 10 digits'
                // },
                // confirm_password:{
                //     required: 'Please enter confirm password',
                //     equalTo:'Confirm password and password not mach'
                // },
                company:'Please enter Company',
                title:'Please enter Title',
                phone_no:{
                    required: 'Please enter phone number',
                    maxlength:'Please enter valid phone number',
                    
                },
                mailing_address:'Please enter mailing address',
                assistant_email:'Please enter  assistant email',
                assistant_phone_no:'Please enter assistant phone number' 
            },
            submitHandler: function(form) {
                validateCaptcha();
                if(isValidCaptcha == false){
                    return;
                }
                var text = $('#business_interests').val();
                var business_interests;
                if (text != null) {
                        business_interests = text.toString();
                }
                    
                var Data = [];
                var singl_data = $('#children_birthday').val();
                var singl = $('#children_name').val();

                $(".extrafield").each(function() {
                    Data['birthday'] = $(this).val();
                });

                $(".extrafield_name").each(function() {
                    Data['name'] = $(this).val();
                });
                // console.log(Data);
                var form = {
                    'first_name': $('#first_name').val(),
                    'last_name': $('#last_name').val(),
                    'email': $('#email').val(),
                    'password': $('#password').val(),
                    'confirm_password':$('#confirm_password').val(),
                    'company': $('#company').val(),
                    'title': $('#title').val(),
                    'phone_no': $('#phone_no').val(),
                    'business_interests': business_interests,
                    'mailing_address':$('#mailing_address').val(),
                    'assistant_name': $('#assistant_name').val(),
                    'assistant_email': $('#assistant_email').val(),
                    'assistant_phone_no': $('#assistant_phone_no').val(),
                    'birthday': $('#birthday').val(),
                    'spouse_name':$('#spouse_name').val(),
                    'spouse_birthday': $('#spouse_birthday').val(),
                    'children': Data,
                    'name_children':singl,
                    'bith_children':singl_data,
                    'country_code':$('#country_code').val(),
                    'assistant_country_code':$('#assistant_country_code').val(),
                    'app_user_status':1,
                    'social_provider_type':$('#social_provider_type').val(),
                    'social_provider_id':$('#social_provider_id').val(),
                    'referral_code':$('#referral_code').val(),
                }
                var url = "{{ url('api/register') }}";
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    type: "POST",
                    data: form,
                    url: url,
                    dataType: "JSON",
                    success: function(response) {
                        if (response.status == true) {
                            window.location.href = "{{route('login')}}";
                        }else{
                            $('#mailerror').removeClass('d-none');
                            $('#mailerror').html(response.message);
                        }
                    },
                    error: function(error) {
                        if (error.status == '404') {
                        
                        } else {
                            
                        }

                    }
                });
            }
        });
        
        
        
    </script>
@endpush