@extends('layout.appHome')

@section('content')

<style type="text/css">
    .err_msg{
        color: red;
    }
</style>

@if(!empty($flash_error))
<section class="small-section">
    <div class="container">
        <div class="row">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ $flash_error }}
            </div>
        </div>
    </div>
</section>
@else
<section class="small-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center services">
                <h4 class="title">
                    Become an Investor
                </h4>
                <p>Fill in the details below and complete your Investor profile on our platform.</p>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</section>


<section class="section bg-white">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-12">
                <form id="formInvestor" class="Uform" action="{{ route('profile.identity') }}" method="post"
                    enctype="multipart/form-data">
                    @csrf()
                    <input type="hidden" name="property_id" value="{{@$id}}">
                    <div class="container-fluid">
                        <div class="row justify-content-center" id="stepAccType">
                            <label class="form-label text-large col-lg-12 text-center mb-5">What type of investor you want to be?</label>
                            <div class="col-lg-4 col-md-4 col-sm-6 col-6">
                                <div class="radio-card">
                                    <input id="typeIndividual" type="radio" name="account_type" value="individual"
                                        checked />
                                    <label for="typeIndividual" class="card-content">
                                        <img
                                            src="{{ asset('asset/package/qbatheme/images/icons/ic-individual.png') }}" />
                                        <span>Individual</span>
                                    </label>
                                </div>
                            </div>

{{--
                    <div class="col-lg-4 col-md-4 col-sm-6 col-6">
                        <div class="radio-card">
                            <input id="typeCompany" type="radio" name="account_type" value="company" />
                            <label for="typeCompany" class="card-content">
                                <img src="{{ asset('asset/package/qbatheme/images/icons/ic-company.png') }}" />
                                <span>Company</span>
                            </label>
                        </div>
                    </div>
--}}


                    <div class="clearfix"></div>
                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 text-center mt-4">
                        <button type="button" class="btn-solid bg-green" id="submitAccType">Next</button>
                    </div>
                </div>


                <div id="formIndividual" class="row not-show">
                    <div class="col-lg-3 col-md-4 col-sm-12 col-12 border-right-toggle-mobile">
                        <div class="stages">
                            <ul>
                                <li class="live">
                                    <span class="id">1</span>
                                    <span class="text">Personal Details</span>
                                </li>
                                <li>
                                    <span class="id">2</span>
                                    <span class="text">Investor Information</span>
                                </li>
                                <li>
                                    <span class="id">3</span>
                                    <span class="text">Document Proof</span>
                                </li>
                                <!-- <li>
                                    <span class="id">3</span>
                                    <span class="text">Banking Details</span>
                                </li> -->
                            </ul>
                        </div>
                    </div>

                    <div class="col-lg-9 col-md-8 col-sm-12 col-12 form-holder">

                        <div class="formstage current">
                            <p>Please enter your personal details to complete your UWorld Passport</p>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="first_name" class="form-label">First Name</label>
                                    <input id="first_name" type="text" class="form-control"
                                        placeholder="First Name" value="{{@$user->identity->first_name}}"
                                        name="first_name" required>
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="last_name" class="form-label">Last Name</label>
                                    <input id="last_name" type="text" class="form-control"
                                        placeholder="Last Name" name="last_name"
                                        value="{{@$user->identity->last_name}}" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 col-sm-12 mb-4">
                                    <label for="email" class="form-label">Email</label>
                                    <input id="email" type="email" class="form-control"
                                        placeholder="Enter email" name="email" value="{{ @$user->email }}"
                                        disabled required>
                                </div>
                            </div>
                            <hr />
                            <!-- <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="city" class="form-label">Country of Residence</label>
                                    <select id="countryResidence" class="form-control" name="residence"
                                        required>
                                        <option value="">Select Country</option>
                                        @foreach($countries as $value)
                                        <option value="{{$value->id}}" @if(@$user->identity->residence ==
                                            $value->id) selected @endif>{{$value->countryname}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="countryCitizenship" class="form-label">Country of
                                        Citizenship</label>
                                    <select id="countryResidence" class="form-control" name="citizenship"
                                        required>
                                        <option value="">Select Country</option>
                                        @foreach($countries as $value)
                                        <option value="{{$value->id}}" @if(@$user->identity->citizenship ==
                                            $value->id) selected @endif>{{$value->countryname}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div> -->
                            <!-- <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="address1" class="form-label">Building Number</label>
                                    <input id="address1" type="text" class="form-control" placeholder="Enter address line 1" name="address_line_1" value="{{@$user->identity->address_line_1}}" required>
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="address2" class="form-label">Address Line 2</label>
                                    <input id="address2" type="text" class="form-control" placeholder="Enter address line 2" name="address_line_2" value="{{@$user->identity->address_line_2}}">
                                </div>
                            </div> -->

                            <div class="row">
                                <div class="col-md-6">
                                    <h4>Address</h4>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="country_code" class="form-label">Country</label>
                                    <select id="country" class="form-control country" name="country_code"
                                        required>
                                        <option value="">Select Country</option>
                                        @foreach($countries as $value)
                                        <option value="{{$value->code}}" @if(@$user->identity->country_code ==
                                            $value->code) selected @endif>{{$value->countryname}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="postalcode" class="form-label">Zip Code/ Post Code/ Area
                                        Code</label>
                                    <input id="postalcode" type="text" class="form-control"
                                        placeholder="Enter postal code" name="postal_code"
                                        value="{{@$user->identity->postal_code}}" required>
                                </div>
                            </div>
                            <div class="row mt-3 mb-3">
                                <div class="col-md-12">
                                    <select style="width: 100%; height: 100px;" name="address_search"
                                        class="form-control melissa-express-ff"></select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="address1" class="form-label">Building Number</label>
                                    <input id="address1" type="text" class="form-control"
                                        placeholder="Enter address line 1" name="address_line_1"
                                        value="{{@$user->identity->address_line_1}}" required readonly>
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="address2" class="form-label">Street Name</label>
                                    <input id="address2" type="text" class="form-control"
                                        placeholder="Enter address line 2" name="address_line_2"
                                        value="{{@$user->identity->address_line_2}}" readonly>
                                </div>
                            </div>
                            <div class="row">
                                <!-- <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="country_code" class="form-label">Country</label>
                                    <select id="country" class="form-control country" name="country_code"
                                        required>
                                        <option value="">Select Country</option>
                                        @foreach($countries as $value)
                                        <option value="{{$value->code}}" @if(@$user->identity->country_code ==
                                            $value->code) selected @endif>{{$value->countryname}}</option>
                                        @endforeach
                                    </select>
                                </div> -->
                                <div class="col-md-3 col-sm-12 mb-4">
                                    <label for="city" class="form-label">City</label>
                                    <input id="city" type="text" class="form-control" name="city" value=""
                                        required readonly>
                                    <!-- <select id="city" class="form-control city" placeholder="City"
                                        name="city_id">
                                        @foreach(cities() as $city)
                                        <option value="{{$city->id}}" @if(@$user->identity->city_id ==
                                            $city->id) selected @endif>{{$city->name}}</option>
                                        @endforeach
                                    </select> -->
                                </div>
                                <!-- <div class="col-md-3 col-sm-12 mb-4">
                                    <label for="postalcode" class="form-label">Zip Code/ Post Code/ Area
                                        Code</label>
                                    <input id="postalcode" type="text" class="form-control"
                                        placeholder="Enter postal code" name="postal_code"
                                        value="{{@$user->identity->postal_code}}" required>
                                </div> -->
                            </div>

                            <hr />
                            <div class="row">
                                <div class="col-md-6">
                                    <h4>Contact</h4>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="pPhone" class="form-label">Primary Phone</label>
                                    <input id="pPhone" type="number" class="form-control"
                                        placeholder="Enter primary phone" name="primary_phone"
                                        value="{{@$user->identity->primary_phone}}" required>
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="sPhone" class="form-label">Secondary Phone (optional)</label>
                                    <input id="sPhone" type="number" class="form-control"
                                        placeholder="Enter secondary phone" name="secondary_phone"
                                        value="{{@$user->identity->secondary_phone}}">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="dob" class="form-label">Date of Birth</label>
                                    <input id="dob" type="date" class="form-control" name="dob"
                                        value="{{ date('Y-m-d', strtotime(@$user->identity->dob)) }}" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="photo" class="form-label">Profile Picture</label>
                                    <input id="photo" type="file" class="form-control" name="photo">
                                </div>
                                <!-- <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="document" class="form-label">Document Proof</label>
                                    <input type="file" required="required" class="form-control" name="document" accept="jpeg,jpg,bmp,png,pdf" />
                                </div> -->
                            </div>
                            <div class="row mt-5">
                                <div class="col mb-4 text-end">
                                    <button type="button" class="uBtn bg-green text-white me-0 ms-0 btnstagenext">Next</button>
                                </div>
                            </div>
                        </div>


                        <div class="formstage">

                            <div class="row mb-2">
                                <h4>Investor Information -</h4>
                            </div>

                            <div class="row mb-4">
                                <div class="col-sm-12">
                                    <label>1. {{$investment_questions[0]->question}}</label>
                                </div>

                                <div class="col-sm-2">
                                    <input type="radio" name="investor_type" value="Individual" required >
                                    <label >Individual</label>
                                </div>

                                <div class="col-sm-2">
                                    <input type="radio" name="investor_type" value="Entity" >
                                    <label >Entity</label><br>
                                </div>

                                <div class="col-sm-12 err_msg" id="investor_type_err">
                                    Please choose your answer
                                </div>
                            </div>

                            <div class="row mb-4">
                                <div class="col-sm-12">
                                    <label>2. {{$investment_questions[1]->question}}</label>
                                </div>

                                <div class="col-sm-2">
                                    <input type="radio" name="is_reg_representative" value="Yes" required >
                                    <label >Yes</label>
                                </div>

                                <div class="col-sm-2">
                                    <input type="radio" name="is_reg_representative" value="No" >
                                    <label >No</label><br>
                                </div>

                                <div class="col-sm-12 err_msg" id="is_reg_representative_err">
                                    Please choose your answer
                                </div>
                            </div>


                            <div class="row mb-4">
                                <div class="col-sm-12">
                                    <label>3. {{$investment_questions[2]->question}}</label>
                                </div>

                                <div class="col-sm-2">
                                    <input type="radio" name="is_finra_member" value="Yes" required >
                                    <label >Yes</label>
                                </div>

                                <div class="col-sm-2">
                                    <input type="radio" name="is_finra_member" value="No" >
                                    <label >No</label><br>
                                </div>

                                <div class="col-sm-12 err_msg" id="is_finra_member_err">
                                    Please choose your answer
                                </div>
                            </div>


                            <div class="row mb-2">
                                <h4>Risk Tolerance -</h4>
                            </div>


                            <div class="row mb-4">
                                <div class="col-sm-12">
                                    <label>4. {{$investment_questions[3]->question}}</label>
                                </div>

                                <div class="col-sm-2">
                                    <input type="radio" name="risk_understanding" value="Yes" required >
                                    <label >Yes</label>
                                </div>

                                <div class="col-sm-2">
                                    <input type="radio" name="risk_understanding" value="No" >
                                    <label >No</label><br>
                                </div>

                                <div class="col-sm-12 err_msg" id="risk_understanding_err">
                                    Please choose your answer
                                </div>
                            </div>


                            <div class="row mb-4">
                                <div class="col-sm-12">
                                    <label>5. {{$investment_questions[4]->question}}</label>
                                </div>

                                <div class="col-sm-2">
                                    <input type="radio" name="loss_understanding" value="Yes" required >
                                    <label >Yes</label>
                                </div>

                                <div class="col-sm-2">
                                    <input type="radio" name="loss_understanding" value="No" >
                                    <label >No</label><br>
                                </div>

                                <div class="col-sm-12 err_msg" id="loss_understanding_err">
                                    Please choose your answer
                                </div>
                            </div>


                            <div class="row mb-4">
                                <div class="col-sm-12">
                                    <label>6. {{$investment_questions[5]->question}}</label>
                                </div>

                                <div class="col-sm-2">
                                    <input type="radio" name="liquidity_needs" value="Yes" required >
                                    <label >Yes</label>
                                </div>

                                <div class="col-sm-2">
                                    <input type="radio" name="liquidity_needs" value="No" >
                                    <label >No</label><br>
                                </div>

                                <div class="col-sm-12 err_msg" id="liquidity_needs_err">
                                    Please choose your answer
                                </div>
                            </div>


                            <div class="row">
                                <div class="col mb-4">
                                    <button type="button" class="uBtn bg-lightGray text-white me-0 ms-0 btnstageprev">Previous</button>
                                </div>
                                <div class="col mb-4 text-end">
                                    <button type="button" class="uBtn bg-green text-white me-0 ms-0 " onclick="validateRadios();" >Next</button>

                                    <button type="button" id="radio_proceed" class="btnstagenext " style="display:none"></button>
                                </div>
                            </div>
                        </div>

                        <div class="formstage">
                            <p>Please enter your document details to complete your KYC.</p>
                            <div class="row">
                                <!-- <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="taxid" class="form-label mb-mobile-toggle">SSN/ Tax ID</label>
                                    <input id="taxid" type="text" class="form-control" placeholder="SSN/ Tax ID" name="ssn_tax_id" required>
                                </div> -->
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="document" class="form-label mb-mobile-toggle">Select
                                        Document</label>
                                    <select class="form-control accredited_kyc_select"
                                        name="accredited_kyc_select" id="accredited_kyc_select">
                                        <option>--Choose Document--</option>
                                        @if(isset($user->trulioo->type))
                                        @foreach($documents as $d)
                                        <option value="{{$d}}" @if(@$user->trulioo->type == $d) selected
                                            @endif>{{$d}}</option>
                                        @endforeach
                                        @else
                                        @foreach($documents as $d)
                                        <option value="{{$d}}">{{$d}}</option>
                                        @endforeach
                                        @endif
                                    </select>

                                    <div class="kyc_doc_container"></div>
                                    <!-- <div class="accredited_kyc_upload" id="accredited_kyc_upload_{{$value->id}}" style="display: none;">
                                        <input id="accredited_kyc_upload_doc" type="file" class="form-control" name="image" required>
                                    </div> -->
                                </div>
                            </div>
                            <div class="row">
                                <div class="col mb-4">
                                    <button type="button"
                                        class="uBtn bg-lightGray text-white me-0 ms-0 btnstageprev">Previous</button>
                                </div>
                                <div class="col mb-4 text-end">
                                    <button type="submit"
                                        class="uBtn bg-green text-white me-0 ms-0 btnstagenext">Submit</button>
                                </div>
                            </div>
                        </div>

                        <!-- <div class="formstage">
                            <p>Please enter your banking details to complete your KYC.</p>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="bankname" class="form-label">Bank Name</label>
                                    <input id="bankname" type="text" class="form-control" placeholder="Enter bank name" name="bankname" />
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="branchname" class="form-label">Branch Name</label>
                                    <input id="branchname" type="text" class="form-control" placeholder="Enter branch name" name="branchname" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="branchcode" class="form-label">Branch Code</label>
                                    <input id="branchcode" type="text" class="form-control" placeholder="Enter branch code number" name="branchcode" />
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="accountnumber" class="form-label">Account Number</label>
                                    <input id="accountnumber" type="number" class="form-control" placeholder="Enter account number" name="accountnumber" />
                                </div>
                            </div>
                            <div class="row">
                                <div class="col mb-4">
                                    <button type="button" class="uBtn bg-lightGray text-white me-0 ms-0 btnstageprev">Previous</button>
                                </div>
                                <div class="col mb-4 text-end">
                                    <button type="submit" class="uBtn bg-green text-white me-0 ms-0 btnstagenext">Submit</button>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>


                <div id="formCompany" class="row not-show">
                    <div class="col-lg-3 col-md-4 col-sm-12 col-12 border-right-toggle-mobile">
                        <div class="stages">
                            <ul>
                                <li class="live">
                                    <span class="id">1</span>
                                    <span class="text">Company Details</span>
                                </li>
                                <li>
                                    <span class="id">2</span>
                                    <span class="text">Contact Person</span>
                                </li>
                                <li>
                                    <span class="id">3</span>
                                    <span class="text">Banking Details</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-9 col-md-8 col-sm-12 col-12 form-holder">
                        <div class="formstage current">
                            <p>Please enter your company details to complete your KYC.</p>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="cname" class="form-label">Company Name</label>
                                    <input id="cname" type="text" class="form-control"
                                        placeholder="Enter company name" name="companyname" required>
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="creg" class="form-label">Company Registration No.</label>
                                    <input id="creg" type="text" class="form-control"
                                        placeholder="Enter company registration number" name="companyreg"
                                        required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="cemail" class="form-label">Company Email Address</label>
                                    <input id="cemail" type="email" class="form-control"
                                        placeholder="Enter company email" name="companyemail" required>
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="website" class="form-label">Website</label>
                                    <input id="website" type="text" class="form-control"
                                        placeholder="Enter company website url" name="website" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="postaladdress" class="form-label">Postal Address</label>
                                    <input id="postaladdress" type="text" class="form-control"
                                        placeholder="Enter company postal address" name="companypostaladdress"
                                        required>
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="phycialaddress" class="form-label">Physical Address</label>
                                    <input id="phycialaddress" type="text" class="form-control"
                                        placeholder="Enter company physical address" name="phycialaddress">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="countryIncorporate" class="form-label">Country of
                                        Incorporate</label>
                                    <select id="countryIncorporate"
                                        class="form-control selectpicker countrypicker" data-live-search="true"
                                        data-default="GB" name="country" required></select>
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="companyPhone" class="form-label">Company Phone</label>
                                    <input id="companyPhone" type="number" class="form-control"
                                        placeholder="Enter company phone" name="companyPhone" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 col-sm-12 mb-4">
                                    <label for="aboutCompany" class="form-label">Brief Description of
                                        Business</label>
                                    <textarea id="aboutCompany" type="number" class="form-control"
                                        placeholder="Write about company" name="aboutCompany"></textarea>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col mb-4 text-end">
                                    <button type="button"
                                        class="uBtn bg-green text-white me-0 ms-0 btnstagenext">Next</button>
                                </div>
                            </div>
                        </div>

                        <div class="formstage">
                            <p>Please enter your contact person details to complete your KYC.</p>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="cfname" class="form-label">Full Name</label>
                                    <input id="cfname" type="text" class="form-control"
                                        placeholder="Enter full name" name="contactfname" required>
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="cemail" class="form-label">Email</label>
                                    <input id="cemail" type="email" class="form-control"
                                        placeholder="Enter email" name="contactemail" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="contactcity" class="form-label">Village/Town/City</label>
                                    <input id="contactcity" type="text" class="form-control"
                                        placeholder="Enter city name" name="contactcity" required>
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="contactcountry" class="form-label">Country</label>
                                    <select id="contactcountry" class="form-control selectpicker countrypicker"
                                        data-live-search="true" data-default="GB" name="contactcountry"
                                        required></select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="contactaddress" class="form-label">Postal Address</label>
                                    <input id="contactaddress" type="text" class="form-control"
                                        placeholder="Enter postal address" name="contactaddress" required>
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="cpostalcode" class="form-label">Postal Code</label>
                                    <input id="cpostalcode" type="number" class="form-control"
                                        placeholder="Enter postal code" name="contactpostalcode" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="cPhone" class="form-label">Phone</label>
                                    <input id="cPhone" type="number" class="form-control"
                                        placeholder="Enter primary phone" name="contactphone" required>
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="cdob" class="form-label">Date of Birth</label>
                                    <input id="cdob" type="date" class="form-control" name="contactdob"
                                        required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col mb-4">
                                    <button type="button"
                                        class="uBtn bg-lightGray text-white me-0 ms-0 btnstageprev">Previous</button>
                                </div>
                                <div class="col mb-4 text-end">
                                    <button type="button"
                                        class="uBtn bg-green text-white me-0 ms-0 btnstagenext">Next</button>
                                </div>
                            </div>
                        </div>

                        <div class="formstage">
                            <p>Please enter your banking details to complete your KYC.</p>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="cbankname" class="form-label">Bank Name</label>
                                    <input id="cbankname" type="text" class="form-control"
                                        placeholder="Enter bank name" name="companybankname" required>
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="cbranchname" class="form-label">Branch Name</label>
                                    <input id="cbranchname" type="text" class="form-control"
                                        placeholder="Enter branch name" name="companybranchname" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="cbranchcode" class="form-label">Branch Code</label>
                                    <input id="cbranchcode" type="text" class="form-control"
                                        placeholder="Enter branch code number" name="contactbranchcode"
                                        required>
                                </div>
                                <div class="col-md-6 col-sm-12 mb-4">
                                    <label for="caccountnumber" class="form-label">Account Number</label>
                                    <input id="caccountnumber" type="number" class="form-control"
                                        placeholder="Enter account number" name="contactaccountnumber" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col mb-4">
                                    <button type="button"
                                        class="uBtn bg-lightGray text-white me-0 ms-0 btnstageprev">Previous</button>
                                </div>
                                <div class="col mb-4 text-end">
                                    <button type="submit"
                                        class="uBtn bg-green text-white me-0 ms-0 btnstagenext">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</div>
</section>

<div class="DrivingLicence" style="display: none;">
<div class="mt-3 mb-3">
<label for="number" class="form-label">Driving Licence Number</label>
<input type="text" class="form-control" name="number" placeholder="" required>
</div>
<div class="mb-3">
<label for="expiry" class="form-label">Expiry Date</label>
<input class="form-control" type="date" name="expiry" placeholder="27/09/2028" required>
</div>
</div>

<div class="IdentityCard" style="display: none;">
<div class="mt-3 mb-3">
<label for="number" class="form-label">Identity Card Number</label>
<input type="text" class="form-control" name="number" placeholder="" required>
</div>
<div class="mb-3">
<label for="DrivingLicence_expiry" class="form-label">Expiry Date</label>
<input class="form-control" type="date" name="expiry" placeholder="27/09/2028">
</div>
</div>

<div class="VoterID" style="display: none;">
<div class="mt-3 mb-3">
<label for="number" class="form-label">Voter ID</label>
<input type="text" class="form-control" name="number" placeholder="">
</div>
<div class="mb-3">
<label for="DrivingLicence_expiry" class="form-label">Expiry Date</label>
<input class="form-control" type="date" name="expiry" placeholder="27/09/2028">
</div>
</div>

<div class="Passport" style="display: none;">
<div class="mt-3 mb-3">
<label for="number" class="form-label">Passport Number</label>
<input type="text" class="form-control" name="number" placeholder="">
</div>
<div class="mb-3">
<label for="DrivingLicence_expiry" class="form-label">Expiry Date</label>
<input class="form-control" type="date" name="expiry" placeholder="27/09/2028">
</div>
</div>

<div class="ResidencePermit" style="display: none;">
<div class="mt-3 mb-3">
<label for="number" class="form-label">Residence Permit Number</label>
<input type="text" class="form-control" name="number" placeholder="">
</div>
<div class="mb-3">
<label for="DrivingLicence_expiry" class="form-label">Expiry Date</label>
<input class="form-control" type="date" name="expiry" placeholder="27/09/2028">
</div>
</div>

<div class="WorkVisa" style="display: none;">
<div class="mt-3 mb-3">
<label for="number" class="form-label">Work Visa Number</label>
<input type="text" class="form-control" name="number" placeholder="">
</div>
<div class="mb-3">
<label for="DrivingLicence_expiry" class="form-label">Expiry Date</label>
<input class="form-control" type="date" name="expiry" placeholder="27/09/2028">
</div>
</div>

@endif

@endsection

@section('scripts-new')
<script type="text/javascript">
$( document ).ready(function() {
    hideRadioErr();
});
function hideRadioErr(){
    $('#investor_type_err').hide();
    $('#is_reg_representative_err').hide();
    $('#is_finra_member_err').hide();
    $('#risk_understanding_err').hide();
    $('#loss_understanding_err').hide();
    $('#liquidity_needs_err').hide();
}

function validateRadios(){
    var vall=1;
    hideRadioErr();
    var investor_type=$('input[name="investor_type"]:checked').val();
    var is_reg_representative=$('input[name="is_reg_representative"]:checked').val();
    var is_finra_member=$('input[name="is_finra_member"]:checked').val();
    var risk_understanding=$('input[name="risk_understanding"]:checked').val();
    var loss_understanding=$('input[name="loss_understanding"]:checked').val();
    var liquidity_needs=$('input[name="liquidity_needs"]:checked').val();

    if(!investor_type){
        vall=0;
        $('#investor_type_err').show();
    }
    if(!is_reg_representative){
        vall=0;
        $('#is_reg_representative_err').show();
    }
    if(!is_finra_member){
        vall=0;
        $('#is_finra_member_err').show();
    }
    if(!risk_understanding){
        vall=0;
        $('#risk_understanding_err').show();
    }
    if(!loss_understanding){
        vall=0;
        $('#loss_understanding_err').show();
    }
    if(!liquidity_needs){
        vall=0;
        $('#liquidity_needs_err').show();
    }

    if(vall==1){$('#radio_proceed').click();}
}


let melissa_id = "{{env('MELISSA_KEY')}}";
let melissa_url = "{{env('MELISSA_URL')}}";

$('.melissa-express-ff').select2({
placeholder: "Type in your Address",
minimumInputLength: 7,
allowClear: true,
ajax: {
    url: melissa_url,
    data: function (params) {
        var query = {
            id: melissa_id,
            ff: params.term + ' ' + $("#postalcode").val(),
            format: 'json',
            country: $("#country").val(),
            maxrecords: '30',
        };
        return query;
    },
    processResults: function (data) {
        const _result = data.Results;
        let items = [];
        items = _result.map((i, index) => {
            return {
                id: index,
                text: i.Address.Address,
                fullAddress: i.Address
            }
        });
        // console.log(items);
        return {
            results: items,
        };
    },
    dataType: 'json'
}
});

$('.melissa-express-ff').on('select2:select', (e) => {
console.log(e.params.data);
const selectedAdd = e.params.data;
$("#address1").val(selectedAdd.fullAddress.Address1);
$("#address2").val(selectedAdd.fullAddress.Address2);
$("#city").val(selectedAdd.fullAddress.Locality);
});

$('.melissa-express-ff').on('select2:clear', (e) => {
$("#address1").val('');
$("#address2").val('');
$("#city").val('');
});


$('.accredited_kyc_select').change(function () {
console.log($(this).val());
const selectedDoc = $(this).val();

$(".kyc_doc_container").empty();
$("." + selectedDoc).clone().appendTo('.kyc_doc_container').show();

// $('.accredited_kyc_upload').hide();

// var id = $(this).val();
// $('#accredited_kyc_upload_' + id).show();
});

$('.company_accredited_kyc_select').change(function () {
$('.company_accredited_kyc_upload').hide();

var id = $(this).val();
$('#company_accredited_kyc_upload_' + id).show();
});

// var cities = '';
// $('.country').on('change', function () {
//     console.log("Country Change", $(this).val());
//     $('.city').html('');
//     if ($(this).val()) {
//         $.get("{{url('countrycity')}}/" + $(this).val())
//             .done(function (data) {
//                 let cities = '';
//                 $.each(data, function (index, value) {
//                     cities += '<option value=' + value.id + '>' + value.name + '</option>';
//                 });
//                 $('.city').html('');
//                 $('.city').html(cities);
//             });
//     }
// });
</script>
@endsection