@extends('layout.appHomeNew')

@section('content')
<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.identity2') }}" method="post"
                    enctype="multipart/form-data">
                    @csrf()
                    <input type="hidden" name="property_id" value="{{@$id}}">
                    <div class="container-fluid">
                        <div class="row justify-content-md-center" id="stepAccType">
                            <label class="form-label text-large col-lg-12 text-center mb-5">What type of investor you
                                wants 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">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%;" 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="{{@$user->identity->city}}" 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">
                                    <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>

@endsection

@section('scripts-new')
<script type="text/javascript">
    // 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;
        $("#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