@extends('layouts.app')
@section('title') {{' Registration '}} @endsection
@section('content')
    {{-- page spedific style/css --}}
    @push('styles')
        <link href="{{ asset('assets/css/intlTelInput.css') }}" rel="stylesheet">
    @endpush

    <div class="row no-gutter">
        <!-- The image half -->
        <div class="col-md-6 col-lg-6 col-xl-7 d-none d-md-flex bg-primary-transparent dynamic-image-load">
        </div>
        <!-- The content half -->
        <div class="col-md-6 col-lg-6 col-xl-5 bg-white py-4">
            <div class="login d-flex align-items-center py-2">
                <!-- Demo content-->
                <div class="container p-0">
                    <div class="row">
                        <div class="col-md-10 col-lg-10 col-xl-9 mx-auto">
                            <div class="card-sigin main-signup-header-wrap">
                                <div class="mb-4 d-flex">
                                    <a href="">
                                        @if (Session::get('data.company_logo'))
                                            <img src="{{ url('images/business_logo_image')."/".Session::get('data.company_logo') }}" class="sign-favicon-a ht-80" alt="logo">
                                        @else
                                            <img src="{{ asset('assets/images/brand/logo.png') }}"
                                            class="sign-favicon-a ht-80" alt="logo">
                                            <img src="{{ asset('assets/images/brand/logo-white.png') }}"
                                            class="sign-favicon-b ht-80" alt="logo">
                                        @endif
                                    </a>
                                    {{-- <h1 class="main-logo1 ms-1 me-0 my-auto tx-28">Va<span>le</span>x</h1> --}}
                                </div>
                                <div class="main-signup-header">
                                    @if(session()->has('error'))
                                    <div class="alert alert-solid-danger logout-success-message" role="alert">
                                        <button aria-label="Close" class="close" data-bs-dismiss="alert" type="button">
                                            <span aria-hidden="true">&times;</span></button>
                                        {{ session()->get('error') }}
                                    </div>
                                    @endif
                                    <h2 class="text-primary">Get Started</h2>
                                    <h5 class="fw-normal mb-4">It's free to signup and only takes a minute.</h5>
                                    <form method="POST" id="business_register" action="{{ route('register') }}">
                                        @csrf
                                        <input type="hidden" name="invitee_uuid" id="inviteeUuid" value="{{ Session::get('data.invitee_uuid') ? Session::get('data.invitee_uuid') : "" }}">
                                        <div class="row">
                                            <div class="col form-group mb-2 login-form-label">
                                                <label for="first_name">First Name</label>
                                                <input type="text" name="first_name" id="first_name" value="{{old('first_name')}}"
                                                    class="form-control @error('first_name') is-invalid @enderror">
                                                @error('first_name')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                            <div class="col form-group mb-2 login-form-label">
                                                <label for="last_name">Last Name</label>
                                                <input type="text" name="last_name" id="last_name" value="{{old('last_name')}}"
                                                    class="form-control @error('last_name') is-invalid @enderror">
                                                @error('last_name')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col form-group mb-2 login-form-label">
                                                <label for="job_title">Job Title</label>
                                                <input type="text" name="job_title" id="job_title" value="{{old('job_title')}}"
                                                    class="form-control @error('job_title') is-invalid @enderror">
                                                @error('job_title')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                            <div class="col form-group mb-2 login-form-label">
                                                <label for="email">Email</label>
                                                <input type="email" name="email" id="email" value="{{ Session::get('data.invitee_email') ? Session::get('data.invitee_email') : request()->get('email') }}"
                                                    class="form-control @error('email') is-invalid @enderror" {{ Session::get('data.invitee_email') ? "readonly" : "" }}>
                                                @error('email')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col form-group mb-2 login-form-label">
                                                <label for="company_name">Company name</label>
                                                <select name="company_name"
                                                    class="form-control @error('company_name') is-invalid @enderror select2" id="company_name">
                                                </select>
                                                @error('company_name')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                            <div class="col form-group mb-2 login-form-label">
                                                <label for="employee_strength">Employees</label>
                                                <select name="employee_strength"
                                                    class="form-control @error('employee_strength') is-invalid @enderror"
                                                    id="employee_strength">
                                                    <option value="1" selected>1 - 10</option>
                                                    <option value="2">11 - 20</option>
                                                    <option value="3">21 - 50</option>
                                                    <option value="4">51 - 100</option>
                                                    <option value="5">101 - 200</option>
                                                    <option value="6">201 - 500</option>
                                                    <option value="7">501 - 1,000</option>
                                                    <option value="8">1,001 - 2,000</option>
                                                    <option value="9">2,001 - 5,000</option>
                                                    <option value="10">5,001 - 10,000</option>
                                                    <option value="11">10,001+</option>
                                                </select>
                                                @error('employee_strength')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col form-group mb-2 login-form-label">
                                                <label for="phone_number">Phone number</label>
                                                <input type="text" name="phone_number" value="{{old('phone_number')}}" id="phone_number"
                                                    class="form-control @error('phone_number') is-invalid @enderror">
                                                <input id="countrycode" type="hidden" name="countrycode" value="1">
                                                <label for="phone_number" generated="true" class="error"></label>
                                                @error('phone_number')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                            <div class="col form-group mb-2 login-form-label">
                                                <label for="country">Country / Region</label>
                                                <input type="country" name="country" id="country" value="{{old('country')}}"
                                                    class="form-control @error('country') is-invalid @enderror">
                                                @error('country')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col form-group mb-2 login-form-label">
                                                <label for="password">Password</label>
                                                <input type="password" name="password" value="" id="password"
                                                    class="form-control @error('password') is-invalid @enderror"
                                                    autocomplete="new-password">
                                                @error('password')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                            <div class="col form-group mb-2 login-form-label">
                                                <label for="password_confirmation">Confirm Password</label>
                                                <input type="password" name="password_confirmation" value=""
                                                    id="password_confirmation"
                                                    class="form-control @error('password_confirmation') is-invalid @enderror">
                                                @error('password_confirmation')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col form-group mb-2 login-form-label">
                                                <label for="affiliate_user_id">Affiliate Business</label>
                                                <select name="affiliate_user_id"
                                                    class="form-control @error('affiliate_user_id') is-invalid @enderror select2"
                                                    id="affiliate_user_id">
                                                    <option value="">Select Affiliate Business Company</option>
                                                    @if(!empty($affiliateBusiness))
                                                        @foreach ($affiliateBusiness as $key => $value)
                                                            <option value= {{$key}}>{{$value}}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                                @error('affiliate_user_id')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row mt-3">
                                            <div class="col">
                                                <div class="form-group">
                                                    <label class="form-switch custom-toggle">
                                                        <input type="checkbox" name="terms_conditions"
                                                            id="terms_conditions"
                                                            class="form-switch-input form-control @error('terms_conditions') is-invalid @enderror">
                                                        <span class="form-switch-indicator custom-radius"></span>
                                                    </label>
                                                    <label class="form-check-label mr-3" for="terms_conditions"> By
                                                        registering you
                                                        agree to the Rwazi Trade <a
                                                            href="{{ route('cms.slug', 'privacy-policy') }}"
                                                            class="text-primary">Privacy Policy</a> & <a
                                                            href="{{ route('cms.slug', 'tream-condition') }}"
                                                            class="text-primary">Terms And
                                                            Conditions</a></label>
                                                    <label for="terms_conditions" generated="true"
                                                        class="error"></label>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" class="btn btn-main-primary btn-block"  id="submitBtn" >Create
                                            Account</button>
                                    </form>
                                    <div class="main-signup-footer mt-2">
                                        <p>Already have an account? <a href="{{ route('login') }}">Sign In</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- End -->
            </div>
        </div><!-- End -->
    </div>

    @push('scripts')
        <script type="text/javascript" src="{{ asset('assets/js/intlTelInput-jquery.js') }}"></script>
        <script type="text/javascript" src="{{ asset('assets/js/intlTelInput.js') }}"></script>
        {{-- form validation --}}
        <script type="text/javascript">
            
            var shouldSubmitForm = false;

            $(document).ready(function() {
                $("#affiliate_user_id").select2();
                var iti = window.intlTelInput(document.querySelector('#phone_number'), {
                    utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js',
                    autoPlaceholder: true,
                });
                var input = $("#phone_number");
                input.intlTelInput({
                    initialCountry: "auto",
                    geoIpLookup: callback => {
                        fetch("https://ipapi.co/json")
                            .then(res => res.json())
                            .then(data => callback(data.country_code))
                            .catch(() => callback("us"));
                    },
                });
                input.on("countrychange", function() {
                    $("#countrycode").val($("#phone_number").intlTelInput("getSelectedCountryData").dialCode);

                    var splitCountryName = $("#phone_number").intlTelInput("getSelectedCountryData").name.split(
                        " (");

                    var finalConutry = "";
                    if (splitCountryName.length > 1) {
                        splitCountryName.pop();
                        finalConutry = splitCountryName.join(" ");
                    } else {
                        finalConutry = splitCountryName[0];
                    }
                    $("#country").val(finalConutry);

                });

                /* code for random image background */
                var currentIndex = 1;
                function randomIntFromInterval(min, max) { // min and max included 
                    return Math.floor(Math.random() * (max - min + 1) + min)
                }
                
                function setNextBackground() {
                    var imageDirectory = 'assets/images/backgrounds/';
                    var randomImage = 'image-'+randomIntFromInterval(1,25)+'.jpg';
                    console.log(randomImage);
                    $('.dynamic-image-load').css('background-image', "url('" + imageDirectory + randomImage+"')");

                    currentIndex = randomIntFromInterval(1,25);
                }

                setNextBackground();
                //$(document).on('click', setNextBackground);

                $('#business_register').validate({
                    rules: {
                        first_name: {
                            required: true,
                        },
                        last_name: {
                            required: true,
                        },
                        job_title: {
                            required: true,
                        },
                        email: {
                            required: true,
                        },
                        company_name: {
                            required: true,
                        },
                        employee_strength: {
                            required: true,
                        },
                        phone_number: {
                            required: true,
                            digits: true,
                            minlength: 8,
                            maxlength: 12
                        },
                        country: {
                            required: true,
                        },
                        password: {
                            required: true,
                            minlength: 8,
                        },
                        password_confirmation: {
                            required: true,
                            equalTo: "#password"
                        },
                        terms_conditions: {
                            required: true,
                        },
                    },
                    messages: {
                        first_name: {
                            required: "First name is required.",
                        },
                        last_name: {
                            required: "Last name is required.",
                        },
                        job_title: {
                            required: "Job title is required.",
                        },
                        email: {
                            required: "Email is required.",
                            remote:"Please Enter valid domain for email."

                        },
                        employee_strength: {
                            required: "Employee strength name is required.",
                        },
                        company_name: {
                            required: "Company name is required.",
                        },
                        phone_number: {
                            required: "Phone number is required.",
                            minlength: 'Please enter at least 8 digit',
                            maxlength: 'Phone number should not be more than 15 digits'
                        },
                        country: {
                            required: "Country name is required.",
                        },
                        password: {
                            required: "Password is required.",
                        },
                        password_confirmation: {
                            required: "Confirm password is required.",
                            equalTo: "Password and confirm password should be same"
                        },
                        terms_conditions: {
                            required: "Please accept terms and conditions.",
                        },
                    },
                    highlight: function(element) {
                        if ($(element).attr('id') === 'terms_conditions') {
                            $(element).closest('.form-switch').addClass('is-invalid');
                        } else {
                            $(element).addClass('error');
                        }
                    },
                    unhighlight: function(element) {
                        if ($(element).attr('id') === 'terms_conditions') {
                            $(element).closest('.form-switch').removeClass('is-invalid');
                        } else {
                            $(element).removeClass('error');
                            $(element).removeClass('valid');
                        }
                    },submitHandler: function(form) {
                        var uuid  = $("#inviteeUuid").val(); 
                        var email = $("#email").val(); 
                        if(uuid){
                            $.ajax({
                                url: '{{ route("invite-business.check-uuid-email") }}',
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                data: {
                                    uuid: uuid,
                                    email: email
                                },
                                dataType: 'json',
                                success: function(response) {
                                    console.log(response);
                                    if(response.result == "uuid and email match"){
                                        shouldSubmitForm = true;
                                        form.submit(); 
                                    }else{
                                        $(".dynamic-image-load").before('<div class="alert alert-solid-danger register-something-went-wrong" role="alert">' +
                                            '<button aria-label="Close" class="close" data-bs-dismiss="alert" type="button">' +
                                            '<span aria-hidden="true">&times;</span></button>' +
                                            response.result +
                                            '</div>');
                                        $('.register-something-went-wrong').delay(4000).fadeOut(500);
                                    }
                                },
                            });
                        }else{
                            shouldSubmitForm = true;
                            form.submit(); 
                        }
                    },
                });

                $('#business_register').on('submit', function(e) {
                    if (!shouldSubmitForm) {
                        e.preventDefault(); 
                    }
                });
                $("#company_name").select2({
                    placeholder: "Please select company Name",
                    minimumInputLength: 3,
                    tags: true,
                    // tokenSeparators: [",", " "],
                    insertTag: function(data, tag) {
                        // Insert the tag at the end of the results
                        data.push(tag);
                    },
                    ajax: {
                        url: '{{ route('get-company-name') }}',
                        method: "GET",
                        dataType: "json",
                        data: function(params) {
                            return {
                                q: params.term, // search term
                                register: true
                            };
                        },
                        processResults: function(data, params) {
                            console.log(data);
                            return {
                                results: data,
                            };
                        },
                    },
                });
                $("#company_name").on("select2:close", function(e) {
                    var selectedValues = $(this).val();
                    // Get all the options in the dropdown
                    var allOptions = $(this)
                        .find("option[data-select2-tag=true]")
                        .toArray();

                    // Remove the extra tags that are not selected
                    $(allOptions).each(function(index, option) {
                        var optionValue = option.value;
                        if (!selectedValues.includes(optionValue)) {
                            $(option).remove();
                        }
                    });
                });
            });
        </script>
    @endpush
@endsection