@extends('front/layouts/main')

@section('title')
M+ Signup
@endsection

@section('content')
	<main class="mplus-registration-page">
		<div class="container">
			<div class="row">
                <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
                    <div class="box white">
                        <div class="title-wrapper">
                            <h3 class="h3 h3-title">Personal Information</h3>
						</div>
                        <form id="storeMPlus" action="{{ route('front.front-m-plus.store') }}" method="post" autocomplete="off">@csrf
                            <p class="mb-2">Which city do you live in & which neighbourhood is your home address?</p>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <select class="form-control select-two" name="city_id" id="city_id" onchange="addMarker()">
                                            <option value="" hidden>Select City</option>
                                            @foreach($cityList as $city)
                                            <option value="{{ $city->id }}" data-value="{{ $city->name }}">{{ $city->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <p class="mb-1">Please locate a marker on the map for your exact location</p>
                                <label class="control-label mb-2">Drag and drop the red location pin to the location of your residence or where you live</label>
                                <div id="map" style="width:100%;height:400px;"></div>
                                <input type="hidden" name="address" id="address">
                            </div>
                            <p class="mb-2">What religion do you practice?</p>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <select class="form-control select-two" name="religion_id" id="religion_id">
                                            <option value="" hidden>Select</option>
                                            @foreach($religionList as $religion)
                                            <option value="{{ $religion->id }}">{{ $religion->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <p class="mb-2">What is your marital status?</p>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <select class="form-control select-two" name="marital_status_id" id="marital_status_id">
                                            <option value="" hidden>Select</option>
                                            @foreach($maritalStatuses as $status)
                                                @if(isset($userProfiles->marital_status_id))
                                                    <option value="{{ $status->id }}" @if($userProfiles->marital_status_id == $status->id) selected @endif>{{ $status->name }}</option>
                                                @else
                                                    <option value="{{ $status->id }}">{{ $status->name }}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <p class="mb-2">How many children do you have?</p>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <select class="form-control select-two" name="no_of_children" id="no_of_children">
                                            <option value="" hidden>Select</option>
                                            @for($i=0;$i<6;$i++)
                                                @if(isset($userProfiles->no_of_children))
                                                <option value="{{ $i }}" @if($i == $userProfiles->no_of_children)selected @endif >{{ $i }}</option>
                                                @else
                                                <option value="{{ $i }}">{{ $i }}</option>
                                                @endif
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <p class="mb-2">What origin are you?</p>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <select class="form-control select-two" name="ethnicity_id" id="ethnicity_id">
                                            <option value="" hidden>Select Origin</option>
                                            @foreach($ethnicityList as $ethnicity)
                                                @if(isset($userProfiles->ethnicity_id))
                                                <option value="{{ $ethnicity->id }}" @if($userProfiles->ethnicity_id == $ethnicity->id)selected @endif>{{ $ethnicity->name }}</option>
                                                @else
                                                <option value="{{ $ethnicity->id }}">{{ $ethnicity->name }}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <p class="mb-2">What is your current salary?</p>
                            <label class="control-label">Please provide your NET salary (the amount of money you receive in your account on a monthly basis).  
                                If you are an entrepreneur or are currently unemployed then put an estimation or an average monthly income or your 
                                previous income when you were last employed</label>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" class="form-control numeric" name="current_salary" id="current_salary" placeholder="Enter salary" value="@if(isset($userExpectation->current_salary)){{$userExpectation->current_salary}}@endif" />
                                    </div>
                                </div>
                            </div>

                            <p class="mb-2">How much money do you spend on leisure on a typical/average week? (leisure is defined as activities for your personal enjoyment &amp; does not include items such as rent, fuel or food)</p>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" class="form-control numeric" name="personal_enjoyment_cost" id="personal_enjoyment_cost" placeholder="Enter amount" />
                                    </div>
                                </div>
                            </div>

                            <p class="mb-2">Your Mobile Wallet Number</p>
                            <label class="control-label">Please enter your mobile wallet number, on which you would like to receive your payouts. You can change this later time when required.</label>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <div class="form-group p-0 m-0">
                                        <div class="input-group">
                                            <div class="input-group-prepend" style="margin-top: 0.25rem !important;">
                                              <span class="input-group-text" id="basic-addon1">+255</span>
                                            </div>
                                            <input type="text" class="form-control numeric" name="mobile_wallet_number" 
                                                id="mobile_wallet_number" placeholder="Enter Mobile Wallet Number" 
                                                style="margin-top: 0.25rem;"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                   
                            
                            <div class="title-wrapper">
                                <h3 class="h3 h3-title">Supplier Preferences</h3>
                            </div>

                            <p class="mb-2">At which bank(s) do you have an open operating account?</p>
                            <div class="form-group select btm-arrow without-label">
                                <select name="bank_accounts[]"  multiple="multiple" id="bank_accounts" class="form-control js-example-basic-multiple select-two">
                                    @foreach($banks as $bank)
                                    <option value="{{ $bank->id }}">{{ $bank->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <p class="mb-2">Which Telecommunication Operating Network(s) do you currently #use?</p>
                            <div class="phone_number_div">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group btm-arrow select">
                                            <label class="control-label" for="network_operator_id"></label>
                                            <select class="form-control" id="network_operator_id_1" name="network_operator_id[1]">
                                                <option value="" hidden>Select Network Operator</option>
                                                @foreach($teleOperators as $operator)
                                                <option value="{{ $operator->id }}">{{ $operator->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group add-wrapper">
                                            <label class="control-label"></label>
                                            <div class="row">
                                                <div class="col-md-9">
                                                    <input type="text" class="form-control numeric phone_number_class" data-id="1" placeholder="Enter Phone Number" id="phone_number_1" name="phone_number[1]">
                                                </div>
                                                <a href="javascript:void(0)" class="btn add-row add_extra_phone_number" title="Add New" id="add_extra_phone_number"><i class="material-icons text-dark">add</i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="insure_personal_item_div">  
                                <p class="mb-2">Do you insure your personal items?</p>
                                <div class="form-group">
                                    <div class="radiocls">
                                        <div class="custom-control custom-radio">
                                            <input type="radio" class="custom-control-input" id="insure_personal_item" name="insure_personal_item" value="1">
                                            <label class="custom-control-label" for="insure_personal_item">Yes</label>
                                        </div>
                                        <div class="custom-control custom-radio">
                                            <input type="radio" class="custom-control-input" id="insure_personal_item1" name="insure_personal_item" value="0">
                                            <label class="custom-control-label" for="insure_personal_item1">No</label>
                                        </div>
                                   </div> 
                                </div>
                            <div class="personal_insurance_companies">    
                                <p class="mb-2">Which insurer do you #use for the above cover?</p>
                                <div class="form-group select btm-arrow without-label">
                                    <select name="insurances[]"  multiple="multiple" id="insurances" class="form-control js-example-basic-multiple select-two">
                                        @foreach($insurances as $insurance)
                                            <option value="{{ $insurance->id }}">{{ $insurance->name }}</option>
                                        @endforeach
                                    </select>
                                    <div class="custom-control custom-checkbox custom-control-inline">
                                        <input type="checkbox" class="custom-control-input" id="have_insurance_broker" name="have_insurance_broker" value="1">
                                        <label class="custom-control-label control-label" for="have_insurance_broker">I #use an Insurance broker/agent</label>
                                    </div>
                                </div>
                            </div>
                            <p class="mb-2">Do you own a personal vehicle?</p>
                            <div class="form-group">
                                <div class="radiocls">
                                    <div class="custom-control custom-radio">
                                        <input type="radio" class="custom-control-input" id="have_personal_vehicle" name="have_personal_vehicle" value="1">
                                        <label class="custom-control-label" for="have_personal_vehicle">Yes</label>
                                    </div>
                                    <div class="custom-control custom-radio">
                                        <input type="radio" class="custom-control-input" id="have_personal_vehicle1" name="have_personal_vehicle" value="0">
                                        <label class="custom-control-label" for="have_personal_vehicle1">No</label>
                                    </div>
                                </div>
                            </div>
                            <div class="fuel_stations_select2">
                                <p class="mb-2">Which fuel station do you most commonly #use to fill your vehicle?</p>
                                <div class="form-group select btm-arrow without-label">
                                    <select name="fuel_stations[]"  multiple="multiple" id="fuel_stations" class="form-control js-example-basic-multiple select-two">
                                    @foreach($fuelStations as $station)
                                    <option value="{{ $station->id }}">{{ $station->name }}</option>
                                    @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="title-wrapper">
                                <h3 class="h3 h3-title">Additional Questions</h3>
                            </div>
                            <p class="mb-2">Do you own your own registered business?</p>
                            <div class="form-group">
                                <div class="radiocls">
                                    <div class="custom-control custom-radio">
                                        <input type="radio" class="custom-control-input" id="have_own_business" name="have_own_business" value="1">
                                        <label class="custom-control-label" for="have_own_business">Yes</label>
                                    </div>
                                    <div class="custom-control custom-radio">
                                        <input type="radio" class="custom-control-input" id="have_own_business1" name="have_own_business" value="0">
                                        <label class="custom-control-label" for="have_own_business1">No</label>
                                    </div>
                                </div>
                            </div>
                            <div class="own_business_description">
                                <p class="mb-2">Please describe your business in the field below.</p>
                                <div class="form-group">
                                    <textarea name="business_description" class="form-control" id="business_description" placeholder="Enter Business Description" rows="3" maxlength="1000"></textarea>
                                    <label class="control-label">
                                        <span class="businessDescriptionTextCount">0</span> / 1000 characters
                                    </label>
                                </div>
                                <p class="mb-2">At which bank(s) do you have an open operating account for your business?</p>
                                <div class="form-group select btm-arrow without-label">
                                    <select name="business_bank_accounts[]"  multiple="multiple" id="business_bank_accounts" class="form-control js-example-basic-multiple select-two">
                                        @foreach($banks as $bank)
                                        <option value="{{ $bank->id }}">{{ $bank->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <p class="mb-2">Do you insure your own business?</p>
                                <div class="form-group">
                                    <div class="radiocls">
                                        <div class="custom-control custom-radio">
                                            <input type="radio" class="custom-control-input" id="have_insure_business" name="have_insure_business" value="1">
                                            <label class="custom-control-label" for="have_insure_business">Yes</label>
                                        </div>
                                        <div class="custom-control custom-radio">
                                            <input type="radio" class="custom-control-input" id="have_insure_business1" name="have_insure_business" value="0">
                                            <label class="custom-control-label" for="have_insure_business1">No</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="business_insurance_companies">
                                    <p class="mb-2">Which insurer do you #use for your business?</p>
                                    <div class="form-group select btm-arrow without-label">
                                        <select name="business_insurances[]"  multiple="multiple" id="business_insurances" class="form-control js-example-basic-multiple select-two">
                                        @foreach($insurances as $insurance)
                                            <option value="{{ $insurance->id }}">{{ $insurance->name }}</option>
                                        @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                           
                           
                            
                            <div class="form-group">
                                <div class="custom-control custom-checkbox radiocls">
                                    <input type="checkbox" class="custom-control-input form-control" id="agreecheck" name="agreecheck" value="1">
                                    <label class="custom-control-label control-label" for="agreecheck">I have read and agree to the <a target="_blank" href="{{ route('consultant.communityGuidelines') }}"><b>Terms and Conditions</b></a>.</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="g-recaptcha" data-sitekey="{{ config('custom.google_recaptcha_site_key') }}"></div>
                                @if($errors->has('g-recaptcha-response'))
                                <span class="invalid-feedback">{{$errors->first('g-recaptcha-response')}}</span>
                                @endif
                            </div>
                            <input type="submit" name="submit" id="submit" class="btn btn-transparent submitMPlusForm" value="Submit M+ Application">
                        </form>
					</div>
				</div>
			</div>
		</div>
	</main>
@endsection

@push('pageJs')
<script type="text/javascript" src="{{ asset('js/vendor/jsvalidation.min.js') }}"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
    $('#storeMPlus').validate({
        errorElement: 'span',
        errorClass: 'invalid-feedback',
        errorPlacement: function(error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parents('.form-group'));
            } else if (element.prop('type') === 'radio' || element.prop('type') === 'checkbox') {
                error.insertAfter(element.parents('.radiocls'));
            } else if (element.hasClass('g-recaptcha-response')) {
                error.insertAfter(element.parents('.g-recaptcha'));
            } else if (element.is("textarea")) {
                error.insertAfter(element.next());
            } else if (element.hasClass('select-two')) {
                error.insertAfter(element.next());
            } else {
                error.insertAfter(element);
            }
        },
        ignore: false,
        rules: {
            "city_id":{"laravelValidation":[["Required",[],"This field is required",true]]},
            "religion_id":{"laravelValidation":[["Required",[],"This field is required",true]]},
            "marital_status_id":{"laravelValidation":[["Required",[],"This field is required",true]]},
            "no_of_children":{"laravelValidation":[["Required",[],"This field is required",true]]},
            "ethnicity_id":{"laravelValidation":[["Required",[],"This field is required",true]]},
            "current_salary":{"laravelValidation":[["Required",[],"This field is required",true],["Numeric",[],"Current Salary must be a number.",false],["Min",["0"],"Current Salary must be a number.",false,"current_salary"]]},
            "mobile_wallet_number":{"laravelValidation":[["Required",[],"This field is required",true],["Numeric",[],"The Mobile Wallet Number must be a number.",false],["Min",["0"],"The Mobile Wallet Number must be a number.",false,"mobile_wallet_number"]]},
            "personal_enjoyment_cost":{"laravelValidation":[["Required",[],"This field is required",true],["Numeric",[],"Personal Enjoyment Cost must be a number.",false],["Min",["0"],"Personal Enjoyment Cost must be a number.",false,"personal_enjoyment_cost"]]},
            "bank_accounts":{"laravelValidation":[["Required",[],"This field is required",true]]},
            "network_operator_id[*]":{"laravelValidation":[["Required",[],"This field is required",true]]},
            "phone_number[*]":{"laravelValidation":[["Required",[],"This field is required",true],["Numeric",[],"Phone Number must be a number.",false],["Min",["0"],"Phone Number must be a number.",false,"phone_number"]]},
            "insure_personal_item":{"laravelValidation":[["Required",[],"This field is required",true]]},
            "insurances":{"laravelValidation":[["RequiredIf",["insure_personal_item","1"],"This field is required",true]]},
            "have_personal_vehicle":{"laravelValidation":[["Required",[],"This field is required",true]]},
            "fuel_stations":{"laravelValidation":[["RequiredIf",["have_personal_vehicle","1"],"This field is required",true]]},
            "have_own_business":{"laravelValidation":[["Required",[],"This field is required",true]]},
            "business_description":{"laravelValidation":[["RequiredIf",["have_own_business","1"],"This field is required",true]]},
            "business_bank_accounts":{"laravelValidation":[["RequiredIf",["have_own_business","1"],"This field is required",true]]},
            "have_insure_business":{"laravelValidation":[["RequiredIf",["have_own_business","1"],"This field is required",true]]},
            "business_insurances":{"laravelValidation":[["RequiredIf",["have_insure_business","1"],"This field is required",true]]},
            "agreecheck":{"laravelValidation":[["Required",[],"Please agree on the terms and conditions.",true]]},
            "g-recaptcha-response":{"laravelValidation":[["Required",[],"Complete the reCAPTCHA to submit the form",true]]},
        }
    });

    $('#storeMPlus').on('submit', function() {
        if($('#storeMPlus').valid()){
            $('.submitMPlusForm').addClass('disabled');
            $('.submitMPlusForm').val('Please Wait...');
        }
    });
</script>
<script>
    var googleMapApi = "{{ config('custom.mapApi.api') }}";
    var teleOperators = {!! $teleOperators !!}; 
</script>
<script src="{{ asset('js/front/m_plus/front_m_plus.js') }}"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ config('custom.mapApi.api') }}&callback=initMap"></script>
@endpush

@push('pageModals')
    @include('front.modules.m_plus.m_plus_info_modal')
@endpush