@extends('layouts.master_auth')

@section('title')
Register
@endsection

@section('css')
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endsection

@section('content')
    <div class="content">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6 col-xl-4">
                <!-- Sign In Block -->
                <div class="block block-themed block-fx-shadow mb-0">
                    <div class="block-header bg-success">
                        <h3 class="block-title">Create Account</h3>
                        <div class="block-options">
                            <a class="btn-block-option" href="{{ route('login', ['id' => $id]) }}" data-toggle="tooltip" data-placement="left" title="Sign In">
                                <i class="fa fa-sign-in-alt"></i>
                            </a>
                        </div>
                    </div>
                    <div class="block-content">
                        <div class="p-sm-3 px-lg-4 py-lg-4">
                            <a href="/"> <img src="{{ asset('images/innoplore-logo.png') }}" width="250px" class="img-responsive mb-5" /></a>
                            <p>Please fill the following details to create a new account.</p>
                            @include('errors.list')
                            <form class="js-validation-signup" action="{{ route('register') }}" method="POST">
                                @csrf
                                <input type="hidden" name="id" value="{{ $id }}">
                                <div class="py-3">
                                    <div class="form-group">
                                        <select name="position" id="position" class="form-control form-control-lg form-control-alt">
                                            <option value="0">Select Title...</option>
                                            @foreach($titles as $titleID => $title)
                                                <option value="{{ $titleID }}" {{ old('position') == $titleID ? 'selected' : '' }}>{{ $title }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <select name="role" id="role" class="form-control form-control-lg form-control-alt">
                                            <option value="0">Select Position/Role...</option>
                                            @foreach($positions as $positionID => $position)
                                                <option value="{{ $positionID }}" {{ old('role') == $positionID ? 'selected' : '' }}>{{ $position }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                    <input type="text" class="form-control form-control-lg form-control-alt" id="name" name="name" value="{{ old('name') }}" placeholder="Name">
                                    </div>
                                    <div class="form-group">
                                    <input type="text" class="form-control form-control-lg form-control-alt" id="organization" name="organization" value="{{ old('organization') }}" placeholder="Organization Name">
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control form-control-lg form-control-alt" id="industry" name="industry">
                                            <option value="0">Select Industry / Sector...</option>
                                            @foreach($industries as $industryID => $industry)
                                                <option value="{{ $industryID }}" {{ old('industry') == $industryID ? 'selected' : '' }}>{{ $industry }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- <div class="form-group">
                                        <select class="form-control form-control-lg form-control-alt" id="country" name="country">
                                            <option value="">Select Country...</option>
                                            @foreach($counntries => $country)
                                                <option value="{{ $country->id }}" {{ old('country') == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                    </div> --}}

                                    <div class="form-group">
                                        <select name="country" id="country" class="form-control form-control-lg form-control-alt">
                                            <option value="-1">Select Country...</option>
                                            @foreach($countries as $country)
                                                <option value="{{ $country->id}}" {{ old('country') == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group" id="city-section">
                                        <div class="text-center" id="city-loader" style="display: none;"><i class="fa fa-spinner fa-spin"></i></div>
                                        <select name="city" id="city" class="form-control form-control-lg form-control-alt">
                                            <option value="-1">Select City...</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <select class="form-control form-control-lg form-control-alt" id="number_of_employees" name="number_of_employees">
                                            <option value="0">Select No. of Employees</option>
                                            @foreach($number_of_employees as $number_of_employeeID => $number_of_employee)
                                                <option value="{{ $number_of_employeeID }}" {{ old('number_of_employees') == $number_of_employeeID ? 'selected' : '' }}>{{ $number_of_employee }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <select name="country_code" id="country_code" class="form-control form-control-lg form-control-alt">
                                            <option value="0">Select Country Code...</option>
                                            @foreach($countries as $country)
                                                <option value="{{ $country->phone_code }}" {{ old('country_code') == $country->phone_code ? 'selected' : '' }}>{{ $country->name }} ({{ $country->phone_code }})</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                    <input type="text" class="form-control form-control-lg form-control-alt" id="mobile_phone" name="mobile_phone" value="{{ old('mobile_phone') }}" placeholder="Contact Phone">
                                    </div>
                                    <div class="form-group">
                                        <input type="email" class="form-control form-control-lg form-control-alt" id="email" name="email" value="{{ old('email') }}" placeholder="Email Address">
                                    </div>
                                    <div class="form-group">
                                        <input type="text" class="form-control form-control-lg form-control-alt" id="cpr_number" name="cpr_number" value="{{ old('cpr_number') }}" placeholder="CPR Number / Referral Code">
                                        <p>If you have received a referral code from a channel partner then please enter it above.</p>
                                    </div>
                                    <div class="form-group">
                                        <input type="password" class="form-control form-control-lg form-control-alt" id="password" name="password" placeholder="Password">
                                    </div>
                                    <div class="form-group">
                                        <input type="password" class="form-control form-control-lg form-control-alt" id="password_confirmation" name="password_confirmation" placeholder="Password Confirm">
                                    </div>

                                    <div class="form-group">
                                        <div class="g-recaptcha" data-sitekey="6Lfb0mApAAAAAN4l3LIjnc7wakjaQXaMHuwQveNk"></div>
                                        <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" data-callback="recaptchaCallback" id="hiddenRecaptcha">
                                    </div>

                                    <div class="form-group">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="signup-terms" name="signup-terms">
                                            <label class="custom-control-label font-w400" for="signup-terms">I agree with the <a target="_blank" href="/terms-and-conditions">terms &amp; policies</a> of Innoplore.</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-6 col-xl-6">
                                        <button type="submit" class="btn btn-block btn-success">
                                            <i class="fa fa-fw fa-plus mr-1"></i> Sign Up
                                        </button>
                                    </div>
                                </div>
                            </form>
                            <!-- END Sign In Form -->
                        </div>
                    </div>
                </div>
                <!-- END Sign In Block -->
            </div>
        </div>
        <div class="row justify-content-center pt-5">
            <div class="col-md-5"></div>
            <div class="col-md-2">
                <a class="btn btn-block btn-primary" href="/">
                    <i class="fa fa-arrow-left mr-1"></i> Back to Home
                </a>
            </div>
            <div class="col-md-5"></div>
        </div>
    </div>
@endsection
@section('js')
    <script src="{{ asset('assets/js/pages/op_auth_signup.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            getCity();
        });

        function recaptchaCallback() {
            $('#hiddenRecaptcha').valid();
        };

        $('select[name="country"]').on('change', function(){
            getCity();
        });

        function getCity(){
            var countryId = $('#country').val();
            if(countryId) {
                $.ajax({
                    url: '/city/' + countryId,
                    type:"GET",
                    dataType:"json",
                    beforeSend: function(){
                        $('#city-loader').show();
                        $('select[name="city"]').hide();
                    },
                    success:function(data) {
                        if(data.status == "success") {
                            if(data.data != ""){
                                $('#city-section').css('display', 'block');
                                $('select[name="city"]').empty();
                                $('select[name="city"]').append('<option value="-1">Select City...</option>');
                                $.each(data.data, function(key, value){
                                    $('select[name="city"]').append('<option value="'+ value.id +'">' + value.name + '</option>');
                                });
                                @if(old('city') != '')
                                    $('select[name="city"]').val('{{ old('city') }}');
                                @endif
                            } else{
                                $('#city-section').css('display', 'none');
                            }
                        }else {
                            alert('failed to retrieve city for selected country');
                        }
                    },
                    complete:function(){
                        $('#city-loader').hide();
                        $('select[name="city"]').show();
                    }
                });
            } else {
                $('select[name="city"]').empty().show();
                $('select[name="city"]').append('<option value="-1">Select City...</option>');
            }
        }
    </script>
@endsection