@extends('layout.appHome')

@section('content')

<style type="text/css">
    .err_msg{
        color: red;
    }
</style>
<!-- No usage of this file -->
<!-- Dashboard header -->
<section class="small-section breadcrumb-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 mb-4">
                <div class="dashboard-topbar">
                    <h4 class="dashboard-title">
                        Become an Investor
                    </h4>
                    <div class="dashcrumb">
                        <span><a href="{{ url('/') }}">Home</a></span>
                        <span>KYC</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-12">
                <p class="section-para mb-0">
                    Fill in the details below and complete your Investor profile on our platform.
                </p>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</section>

<!-- Dashboard Body -->
<section class="section pt-4" id="steptop">
    <div class="container">
        <form class="dashform kycform" action="{{ route('profile.identity2') }}" method="post"
            enctype="multipart/form-data">
            @csrf
            @include('common.notify')
            <!-- Top Cards -->
            <div id="stepAccType" class="row justify-content-center">
                <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 text-white" id="accountType">Next</button>
                </div>
            </div>
            <div class="row">
                <div id="setpsindividual" class="col-lg-12 mb-4 d-none">
                    <div class="form-step">
                        <div class="steps active">
                            <span class="number">1</span>
                            <span class="text">Personal Details</span>
                        </div>
                        <div class="steps">
                            <span class="number">2</span>
                            <span class="text">Investor Information</span>
                        </div>

                        <div class="steps">
                            <span class="number">3</span>
                            <span class="text">Document Proof</span>
                        </div>
                    </div>
                </div>
                <div id="setpscompany" class="col-lg-12 mb-4 d-none">
                    <div class="form-step">
                        <div class="steps active">
                            <span class="number">1</span>
                            <span class="text">Personal Details</span>
                        </div>
                        <div class="steps">
                            <span class="number">2</span>
                            <span class="text">Contact Person</span>
                        </div>
                        <div class="steps">
                            <span class="number">3</span>
                            <span class="text">Personal Details</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Individual Info -->
            <div id="formIndividual" class="row d-none">
                <div class="col-lg-12">

                    <div class="dash-card bg-white mb-4">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="info-bar">
                                    <h3 class="tab-title">General Information</h3>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-4">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="fname">First Name <span>*</span></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-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="lname">Last Name <span>*</span></label>
                                        <input id="last_name" type="text" class="form-control" placeholder="Last Name"
                                            name="last_name" value="{{@$user->identity->last_name}}" required>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="email">Email <span>*</span></label>
                                        <input id="email" type="email" class="form-control" placeholder="Enter email"
                                            name="email" value="{{ @$user->email }}" disabled required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="info-bar">
                                    <h3 class="tab-title">Address</h3>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-4">
                                <div class="row">
                                    <div class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="country">Country <span>*</span></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-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="postalcode">Zip Code/ Post Code/ Area Code <span>*</span></label>
                                        <input id="postalcode" type="text" class="form-control"
                                            placeholder="Enter postal code" name="postal_code"
                                            value="{{@$user->identity->postal_code}}" required>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                        <label for="addressline1">Type Your Address <span>*</span></label>
                                        <select style="width: 100%;" name="address_search"
                                            class="form-control melissa-express-ff"></select>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="buildingno">Building Number <span>*</span></label>
                                        <input id="address_line_1" 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-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="streetname">Street Name <span>*</span></label>
                                        <input id="address_line_2" type="text" class="form-control"
                                            placeholder="Enter address line 2" name="address_line_2"
                                            value="{{@$user->identity->address_line_2}}" readonly>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="city">City <span>*</span></label>
                                        <input id="city" type="text" class="form-control" name="city"
                                            value="{{@$user->identity->city}}" required readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="info-bar">
                                    <h3 class="tab-title">Contact</h3>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-4">
                                <div class="row">
                                    <div class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="primaryphone">Primary Phone <span>*</span></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-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="secondaryphone">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 class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="dob">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 class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="photo">Profile Picture <span class="tinfo" data-bs-toggle="tooltip"
                                                data-bs-placement="right" data-bs-html="true"
                                                title="Type: JPG,PNG<br/>Max Size: 2MB"></span></label>
                                        <input id="photo" type="file" class="form-control" name="photo">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                <button type="button" class="btn-solid bg-green text-white btnstepform">Next</button>
                            </div>
                        </div>
                    </div>

                    <div class="dash-card bg-white mb-4 d-none">
                        <div class="row">

                            <div class="col-lg-12">
                                <div class="info-bar">
                                    <h3 class="tab-title">Investor Information</h3>
                                </div>
                            </div>
                        </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-lg-12 col-md-12 col-sm-12 col-12">
                                <button type="button" class="uBtn less bg-transparent br-black text-black btnstepformprev ms-0">Previous</button>
                                <button type="button" class="btn-solid bg-green text-white" onclick="validateRadios();" >Next</button>

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

                        </div>
                    </div>

                    <div class="dash-card bg-white mb-4 d-none">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="d-flex flex-row justify-content-between">
                                    <h3 class="tab-title">Document Proof</h3>
                                    <button type="button" class="btn btn-link adddocuments"><i class="fa fa-plus"
                                            aria-hidden="true"></i> Add Document</button>
                                </div>
                            </div>
                            <div class="col-lg-12 mb-4">
                                <div class="table-responsive">
                                    <table id="documentProofTable" class="table-full table-dark table-responsive">
                                        <thead>
                                            <tr>
                                                <th>Document Type *</th>
                                                <th>Document Number *</th>
                                                <th>Expiry Date *</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($user->trulioo as $trulioo)
                                            <tr>
                                                <td>
                                                    <select required class="form-control accredited_kyc_select"
                                                        name="accredited_kyc_select[{{ $loop->index }}][type]"
                                                        id="accredited_kyc_select">
                                                        <option>--Choose Document--</option>
                                                        @foreach($documents as $d)
                                                        <option value="{{$d}}" @if(@$trulioo->type == $d) selected
                                                            @endif>{{$d}}</option>
                                                        @endforeach
                                                    </select>
                                                    <!-- <select name="accredited_kyc_select[]" class="form-control">
                                                        <option value="">Select</option>
                                                        <option value="Driving License">Driving License</option>
                                                        <option value="PAN Card">PAN Card</option>
                                                    </select> -->
                                                </td>
                                                <td>
                                                    <input required type="text"
                                                        name="accredited_kyc_select[{{ $loop->index }}][number]"
                                                        class="form-control" value="{{ @$trulioo->number }}" />
                                                </td>
                                                <td>
                                                    <div class="input-group date">
                                                        <input required type="text"
                                                            name="accredited_kyc_select[{{ $loop->index }}][expiry]"
                                                            class="form-control datepicker" placeholder="YYYY-MM-DD"
                                                            value="{{ @$trulioo->expiry }}">
                                                        <span class="input-group-append">
                                                            <span class="input-group-text d-block">
                                                                <i class="fa fa-calendar"></i>
                                                            </span>
                                                        </span>
                                                    </div>
                                                </td>
                                                <td class="actionbar">
                                                    <button type="button" class="btn-action removedocument"></button>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                <button type="button"
                                    class="uBtn less bg-transparent br-black text-black btnstepformprev ms-0">Previous</button>
                                <button type="submit" class="btn-solid bg-green text-white">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Company Info -->
            <div id="formCompany" class="row d-none">
                <div class="col-lg-12">
                    <div class="dash-card bg-white mb-4">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="info-bar">
                                    <h3 class="tab-title">General Information</h3>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-4">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="cname">Company Name <span>*</span></label>
                                        <input type="text" name="cname" class="form-control" id="cname" required>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="cregno">Company Registration No. <span>*</span></label>
                                        <input type="text" name="cregno" class="form-control" id="cregno" required>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="cemail">Company Email <span>*</span></label>
                                        <input type="email" name="cemail" class="form-control" id="cemail"
                                            value="jon.franchi@ufoundation.world" required readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="info-bar">
                                    <h3 class="tab-title">Address</h3>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-4">
                                <div class="row">
                                    <div class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="country">Country <span>*</span></label>
                                        <select name="country" class="form-control" id="country" required>
                                            <option value="">Select</option>
                                            <option value="England">England</option>
                                            <option value="UK">United Kingdom</option>
                                            <option value="USA">United States of America</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="postalcode">Zip Code/ Post Code/ Area Code <span>*</span></label>
                                        <input type="text" name="postalcode" class="form-control" id="postalcode"
                                            required>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                        <label for="addressline1">Type Your Address <span>*</span></label>
                                        <input type="text" name="addressline" class="form-control" id="addressline"
                                            required>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="buildingno">Building Number <span>*</span></label>
                                        <input type="text" name="buildingno" class="form-control" id="buildingno"
                                            required>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="streetname">Street Name <span>*</span></label>
                                        <input type="text" name="streetname" class="form-control" id="streetname"
                                            required>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="city">City <span>*</span></label>
                                        <input type="text" name="city" class="form-control" id="city" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="info-bar">
                                    <h3 class="tab-title">Contact</h3>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-4">
                                <div class="row">
                                    <div class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="primaryphone">Primary Phone <span>*</span></label>
                                        <input type="text" name="primaryphone" class="form-control" id="primaryphone"
                                            required>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="secondaryphone">Secondary Phone (Optional)</label>
                                        <input type="text" name="secondaryphone" class="form-control"
                                            id="secondaryphone">
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="website">Website</label>
                                        <input type="text" name="website" class="form-control" id="website">
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="logo">Company Logo <span class="tinfo" data-bs-toggle="tooltip"
                                                data-bs-placement="right" data-bs-html="true"
                                                title="Type: JPG,PNG<br/>Max Size: 2MB"></span></label>
                                        <input type="file" name="logo" id="logo" class="form-control" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                <button type="button" class="btn-solid bg-green text-white btnstepform">Next</button>
                            </div>
                        </div>
                    </div>
                    <div class="dash-card bg-white mb-4 d-none">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="info-bar">
                                    <h3 class="tab-title">Contact Person Information</h3>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-4">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="cpfname">First Name <span>*</span></label>
                                        <input type="text" name="cpfname" class="form-control" id="cpfname" required>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="cplname">Last Name <span>*</span></label>
                                        <input type="text" name="cplname" class="form-control" id="cplname" required>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="cpemail">Email <span>*</span></label>
                                        <input type="email" name="cpemail" class="form-control" id="cpemail" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="info-bar">
                                    <h3 class="tab-title">Address</h3>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-4">
                                <div class="row">
                                    <div class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="cpcountry">Country <span>*</span></label>
                                        <select name="cpcountry" class="form-control" id="cpcountry" required>
                                            <option value="">Select</option>
                                            <option value="England">England</option>
                                            <option value="UK">United Kingdom</option>
                                            <option value="USA">United States of America</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="cppostalcode">Zip Code/ Post Code/ Area Code <span>*</span></label>
                                        <input type="text" name="cppostalcode" class="form-control" id="cppostalcode"
                                            required>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                        <label for="cpaddressline">Type Your Address <span>*</span></label>
                                        <input type="text" name="cpaddressline1" class="form-control"
                                            id="cpaddressline1" required>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="cpbuildingno">Building Number <span>*</span></label>
                                        <input type="text" name="cpbuildingno" class="form-control" id="cpbuildingno"
                                            required>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="cpstreetname">Street Name <span>*</span></label>
                                        <input type="text" name="cpstreetname" class="form-control" id="cpstreetname"
                                            required>
                                    </div>
                                    <div class="col-lg-4 col-md-4 col-sm-12 col-12 mb-2">
                                        <label for="cpcity">City <span>*</span></label>
                                        <input type="text" name="cpcity" class="form-control" id="cpcity" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="info-bar">
                                    <h3 class="tab-title">Contact</h3>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12 mb-4">
                                <div class="row">
                                    <div class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="cpprimaryphone">Primary Phone <span>*</span></label>
                                        <input type="text" name="cpprimaryphone" class="form-control"
                                            id="cpprimaryphone" required>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="cpsecondaryphone">Secondary Phone (Optional)</label>
                                        <input type="text" name="cpsecondaryphone" class="form-control"
                                            id="cpsecondaryphone">
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="cpsaledate">Date of Birth</label>
                                        <div class="input-group date">
                                            <input type="text" class="form-control datepicker" placeholder="DD-MM-YYYY"
                                                id="cpsaledate">
                                            <span class="input-group-append">
                                                <span class="input-group-text d-block">
                                                    <i class="fa fa-calendar"></i>
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-12 col-12 mb-2">
                                        <label for="cpphoto">Profile Picture <span class="tinfo"
                                                data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true"
                                                title="Type: JPG,PNG<br/>Max Size: 2MB"></span></label>
                                        <input type="file" name="photo" id="cpphoto" class="form-control" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                <button type="button"
                                    class="uBtn less bg-transparent br-black text-black btnstepformprev ms-0">Previous</button>
                                <button type="button" class="btn-solid bg-green text-white btnstepform">Next</button>
                            </div>
                        </div>
                    </div>
                    <div class="dash-card bg-white mb-4 d-none">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="info-bar">
                                    <h3 class="tab-title">Bank Information</h3>
                                </div>
                            </div>
                            <div class="col-lg-12 mb-4">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                        <label for="bankname">Bank Name <span>*</span></label>
                                        <input type="text" name="bankname" class="form-control" id="bankname" required>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                        <label for="branchname">Branch Name <span>*</span></label>
                                        <input type="text" name="branchname" class="form-control" id="branchname"
                                            required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                        <label for="branchcode">Branch Code <span>*</span></label>
                                        <input type="text" name="branchcode" class="form-control" id="branchcode"
                                            required>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-12 col-12 mb-2">
                                        <label for="acno">Account Number <span>*</span></label>
                                        <input type="text" name="acno" class="form-control" id="acno" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                <button type="button"
                                    class="uBtn less bg-transparent br-black text-black btnstepformprev ms-0">Previous</button>
                                <button type="submit" class="btn-solid bg-green text-white">Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>
</section>
@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();}
}




    const documentTypes = @json($documents);
    let docOptions = '<option>--Choose Document--</option>';
    documentTypes.forEach((d) => {
        docOptions += `<option value="${d}">` + d + `</option>`;
    });

    // Melissa Select2

    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;
        $("#address_line_1").val(selectedAdd.fullAddress.Address1);
        $("#address_line_2").val(selectedAdd.fullAddress.Address2);
        $("#city").val(selectedAdd.fullAddress.Locality);
    });

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

    // Add documents
    $(document).on("click", ".adddocuments", function () {
        //var totalrow = $(this).parents('tbody').find('tr').length;
        //alert(totalrow);

        const _tableDocs = $("#documentProofTable");

        const docRows = _tableDocs.find("tbody").find("tr").length;
        console.log("Doc Rows: ", docRows);

        _tableDocs
            .find("tbody")
            .append(
                "<tr>" +
                "<td>" +
                `<select required name="accredited_kyc_select[${docRows + 1
                }][type]" class="form-control">${docOptions}</select>` +
                "</td>" +
                "<td>" +
                `<input required type="text" name="accredited_kyc_select[${docRows + 1
                }][number]" class="form-control" />` +
                "</td>" +
                "<td>" +
                `<div class="input-group date"><input required type="text" name="accredited_kyc_select[${docRows + 1
                }][expiry]" class="form-control datepicker" placeholder="YYYY-MM-DD"><span class="input-group-append"><span class="input-group-text bg-white d-block"><i class="fa fa-calendar"></i></span></span></div>` +
                "</td>" +
                '<td class="actionbar"><button type="button" class="btn-action removedocument"></button>' +
                "</td>" +
                "</tr>"
            );


    });

    // Remove documents
    $(document).on("click", ".removedocument ", function () {
        console.log($(this).parent());
        $(this).parents("tr").remove();
    });


    // $('.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();
    // });

</script>
@endsection