@extends('layout.appHome')

@section('content')

<link rel='stylesheet' href="{{asset('assets/css/dashboard.css')}}" type='text/css' media='all' />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" media="all" />

<!-- Select2 styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/sweetalert2@11.6.5/dist/sweetalert2.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@6.6.6/css/flag-icons.min.css"/>

<style type="text/css">
    .select2-results__message{/*margin-top:15px;*/}
</style>



<section class="section profile-banner"></section>

<section class="section bg-white">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="header-bar">
                    <div class="title">
                        <h2>Profile</h2>
                    </div>
                    <div class="infobar">
                        <div class="breadcrumb">
                            <a href="{{ url('/') }}">Home</a>
                            <span class="divider"></span>
                            <a>Profile</a>
                        </div>
                    </div>
                </div>
            </div>

            @php
            $user_address = "";
            if (isset($user->identity->primary_phone) && $user->identity->primary_phone != "") {
                $user_address = $user->identity->address_line_1 . ', ';
            }

            if (isset($user->identity->city) && $user->identity->city != "") {
                $user_address .= $user->identity->city . ', ';
            }

            if ($user_country_name != "") {
                $user_address .= $user_country_name;
            }

            $ref_code = "";

            if (Auth::user()->affiliate_id != "") {
                $ref_code = url('/register').'?ref='. Auth::user()->affiliate_id;
            }

            @endphp

            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                <div class="row">
                    <div class="col-12">
                        <div class="ucard p-3  mh-576">

                        @if(isset($user->identity->photo_bg))
                            <div class="profile-wrap" style="background: url('{{img(@$user->identity->photo_bg)}}') no-repeat; background-size: cover; background-position: center;">
                        @else
                            <div class="profile-wrap" style="background: url('{{ url('/assets/images/profile/profile-bg.jpg') }} ') no-repeat; background-size: cover; background-position: center;">
                        @endif

                                <div class="profile-pic">
                                    @if(isset($user->identity->photo))
                                        <img src="{{ img(@$user->identity->photo) }}" />
                                    @else
                                        <img src="{{asset('assets/images/icons/logo-top.png')}}" />
                                    @endif

                                </div>
                            </div>



                            <div class="profile-name">{{@$user->identity->first_name}} {{@$user->identity->last_name}}</div>
                            <div class="profile-info">
                                @if ($user_country_code != "")
                                    <span class="icon">
                                        <span class="country_flag fi fi-{{$user_country_code}}"></span>
                                    </span>
                                @endif
                                <span class="text">{{$user_address}}</span>
                            </div>
                            <div class="profile-info">
                                    <span class="icon">
                                        <img src="{{asset('/assets/images/profile/email.png')}}" />
                                    </span>
                                <span class="text">{{@$user->email}}</span>
                            </div>
                            <div class="profile-info">
                                    <span class="icon">
                                        <img src="{{asset('/assets/images/profile/call.png')}}" />
                                    </span>
                                <span class="text">{{@$user->identity->primary_phone}}</span>
                            </div>

                            @if($ref_code != "")
                            <div class="referral">
                                <label for="companyname" class="dash-label">Referral Code</label>
                                <div class="ref-wrap">
                                    <input type="text" class="form-control" name="ref-code" value="{{$ref_code}}" readonly>
                                    <button type="button" class="copy" onclick="copy('{{$ref_code}}' ,'#copy_button')" id="copy_button"></button>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
                <div class="ucard p-3">

                    <div class="form-tab">
                        <div class="tab-index active" data-tab="tab1" id="tab1_title">
                            <span class="number">1</span>
                            <span class="title">Profile Information</span>
                        </div>
                        <div class="tab-index" data-tab="tab2" id="tab2_title">
                            <span class="number">2</span>
                            <span class="title">Document Proof</span>
                        </div>
                        <div class="tab-index" data-tab="tab3">
                            <span class="number">3</span>
                            <span class="title">Manage Password</span>
                        </div>
                    </div>

{{--
                    <form id="editprofile" class="uform w-100" action="{{ route('profile.identity2') }}" method="post" enctype="multipart/form-data">

                        @csrf
                        <input type="hidden" name="page" value="profile" />
--}}

                        <div class="form-tab-explorer active" id="tab1">

                            @if(!empty($flash_error))
                                <div class="row">
                                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                        {{ $flash_error }}
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                    </div>
                                </div>
                            @endif

                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                    <label for="fname">First Name <span>*</span></label>
                                    <input type="text" name="first_name" id="first_name" class="form-control" placeholder="Enter first name" value="{{@$user->identity->first_name}}" disabled required >
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                    <label for="lname">Last Name <span>*</span></label>
                                    <input type="text" name="last_name" id="last_name" class="form-control" placeholder="Enter last name" value="{{@$user->identity->last_name}}" disabled required >
                                </div>
                                <div class="clearfix"></div>

                                <div class="col-12">
                                    <div class="form-breaker">Address</div>
                                </div>


                                <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                    <label for="country">Country <span>*</span></label>
                                    <select name="country_code" id="country" class="form-control country" required disabled >
                                        <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-6 col-md-6 col-sm-12 col-12">
                                    <label for="pincode">Zip Code/ Post Code/ Area Code <span>*</span></label>
                                    <input type="text" name="postal_code" id="postalcode" class="form-control" placeholder="Enter zip code" value="{{@$user->identity->postal_code}}" disabled required >
                                </div>


                                <div class="col-12">
                                    <label for="address">Type Your Address</label>
                                    <div class="map-wrap">
                                        <select  name="address_search" class="form-control melissa-express-ff" disabled></select>
                                        <span class="location">
                                            <img src="{{asset('/assets/images/profile/location.png')}}" />
                                        </span>
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <label for="building">Building No</label>
                                    <input type="text" name="address_line_1" id="address_line_1" class="form-control" placeholder="Enter building number" value="{{@$user->identity->address_line_1}}" disabled >
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <label for="street">Street No</label>
                                    <input type="text" name="address_line_2" id="address_line_2" class="form-control" placeholder="Enter street number" value="{{@$user->identity->address_line_2}}" disabled>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <label for="city">City <span>*</span></label>
                                    <input type="text" name="city" id="city" class="form-control" placeholder="Enter city" value="{{ @$user->identity->city }}"  disabled required >
                                </div>

                                <div class="clearfix"></div>

                                <div class="col-12">
                                    <div class="form-breaker">Profile Information</div>
                                </div>


                                <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                    <label for="profileBG">Profile Background Image</label>
                                    <input type="file" name="photo_bg" id="profileBG" class="form-control" accept="image/png,image/jpeg"  disabled >
                                </div>


                                <div class="col-lg-6 col-md-6 col-sm-12 col-12">
                                    <label for="profilePic">Profile Image</label>
                                    <input type="file" name="photo" id="profilePic" class="form-control" accept="image/png,image/jpeg" disabled >
                                </div>

                            </div>
                        </div>






                        <div class="form-tab-explorer" id="tab2">
                            <div class="text-end mb-2">
                                <button type="button" class="adddocument">Add New</button>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-hover dash-table" id="doclist">
                                    <thead>
                                    <tr>
                                        <th>Document Type</th>
                                        <th>Document Number</th>
                                        <th>Expiry Date</th>
                                        <th id="doclistaction">Action</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                        @php
                                        $s=1;
                                        @endphp

                                        @foreach($trulioo as $doc)

                                            <tr id="{{ $s }}">

                                                @php
                                                $doc_name = "";
                                                @endphp
                                                @foreach($documents as $d)
                                                    @if(@$doc->type == $d)
                                                        @php
                                                        $doc_name = $d;
                                                        @endphp
                                                    @endif
                                                @endforeach

                                                <input type="hidden" name="accredited_kyc_select[{{ $s }}][type]" value="{{$doc_name}}" />
                                                <input type="hidden" name="accredited_kyc_select[{{ $s }}][number]" value="{{ @$doc->number }}" />
                                                <input type="hidden" name="accredited_kyc_select[{{ $s }}][expiry]" value="{{ @$doc->expiry }}" />

                                                <td>
                                                    <span class="highlight">{{$doc_name}}</span>
                                                </td>
                                                <td>
                                                    {{ @$doc->number }}
                                                </td>
                                                <td>
                                                    {{ @$doc->expiry }}
                                                </td>

                                                <td class="toggleedit ">
                                                    <button type="button" class="dash-btn editdoc me-2"></button>
                                                    <button type="button" data-id="{{$doc->id}}" class="dash-btn deletedoc removedocument"></button>
                                                </td>


                                            </tr>

                                            @php
                                            $s++;
                                            @endphp
                                        @endforeach

                                    <input type="hidden" id="trow" value="{{$s-1}}" />

                                    </tbody>
                                </table>
                            </div>
                        </div>

{{--                    <div class="btn-wrap-abs">
                            <button type="button" class="btn btn-blue" id="editprofileinfo">EDIT</button>
                                <button type="button" class="btn btn-blue d-none" id="nextprofileinfo">NEXT</button>
                                <button type="submit" class="btn btn-blue d-none" id="saveprofileinfo">SAVE</button>
                                <button type="button" class="btn btn-transparentBlue d-none" id="cancenprofileinfo" onClick="window.location.reload()">CANCEL</button>

                            <div class="col-12 first_errormsg" id=""><span class="errormsg first_errormsg" >Please fill up all the fields</span></div>

                            </div>

                       </form> --}}

                    <div class="form-tab-explorer" id="tab3">

                        <form id="updatepassword" class="uform w-100" action="{{ route('cognito.action.change.password') }}" method="post">
                            @csrf

                            <input id="email" type="hidden" class="form-control @error('email') is-invalid @enderror"
                                   name="email" value="{{{ Auth::user()->email }}}" autocomplete="email" required />


                            <div class="row">
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <label for="curpassword">Current Password <span>*</span></label>
                                    <input type="password" name="password" id="password" class="form-control" placeholder="Enter current password" required >
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <label for="newpassword">New Password <span>*</span></label>
                                    <input type="password" name="new_password" id="new_password" class="form-control" placeholder="Enter new password" required >
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <label for="confirmnewpassword">Confirm New Password <span>*</span></label>
                                    <input type="password" name="new_password_confirmation" id="new_password_confirmation" class="form-control" placeholder="Enter new password again" required >
                                </div>

                                <div class="col-12">
                                    <button type="submit" class="btn btn-blue btn-abs">UPDATE PASSWORD</button>
                                </div>
                            </div>

                        </form>
                    </div>

                </div>
            </div>

        </div>
    </div>
</section>



<!-- Profile edit form success modal -->
<div class="dash-modal" id="profilesuccess">
    <div class="dash-modal-container">
        <div class="status-info">
            <img src="{{asset('assets/images/profile/success.png')}}" />
            <span class="text">Profile Save Successfully</span>
            <button type="button" class="btn btn-blue close-dash-modal">Close</button>
        </div>
    </div>
</div>



<!-- Document add modal -->
<div class="dash-modal" id="addnewdocmodal">
    <div class="dash-modal-container wider">
        <div class="form-modal">
            <div class="heading">Add Document</div>

            <form id="adddocform" class="uform" action="" method="post">

                <input type="hidden" name="trow" id="trow" value="" />

                <div class="row">
                    <div class="col-12">
                        <label for="doctype">Document Type <span>*</span></label>
                        <select name="doctype" id="doctype" class="form-control doctype"></select>
                    </div>
                    <div class="col-12">
                        <label for="">Document Number <span>*</span></label>
                        <input type="text" name="docnumber" id="docnumber" class="form-control">
                    </div>
                    <div class="col-12">
                        <label for="">Expiry Date <span>*</span></label>
                        <input type="text" name="expdate" id="expdate" class="form-control datepicker " readonly >
                    </div>
                    <div class="col-12"><span class="errormsg" id="errormsg">Please fill up all the fields</span></div>
                    <div class="col-12">
                        <button type="submit" class="btn btn-blue me-2">Add</button>
                        <button type="button" class="btn btn-blue close-dash-modal">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>



<!-- Document edit modal -->
<div class="dash-modal" id="editdocmodal">
    <div class="dash-modal-container wider">
        <div class="form-modal">
            <div class="heading">Edit Document</div>

            <form id="editdocform" class="uform" action="" method="post">

                <input type="hidden" name="ex_trow" id="ex_trow" value="" />

                <div class="row">
                    <div class="col-12">
                        <label for="doctype">Document Type <span>*</span></label>
                        <select name="doctype" id="ex_doctype" class="form-control doctype"></select>
                    </div>
                    <div class="col-12">
                        <label for="docnumber">Document Number <span>*</span></label>
                        <input type="text" name="docnumber" id="ex_docnumber" class="form-control">
                    </div>
                    <div class="col-12">
                        <label for="expdate">Expiry Date <span>*</span></label>
                        <input type="text" name="expdate" id="ex_expdate" class="form-control datepicker" readonly >
                    </div>

                    <div class="col-12"><span class="errormsg" id="ex_errormsg" >Please fill up all the fields</span></div>


                    <div class="col-12">
                        <button type="submit" class="btn btn-blue me-2">Update</button>
                        <button type="button" class="btn btn-blue close-dash-modal">Cancel</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>



<!-- Delete Document modal -->
<div class="dash-modal" id="deletedocmodal">
    <div class="dash-modal-container">
        <div class="status-info">
            <img src="{{asset('/assets/images/profile/denfer.png')}}" />
            <span class="text">Do you Want to Delete?</span>
            <div class="btn-wrap">
                <input type="hidden" name="deletdocid" value="">
                <button type="button" class="btn btn-transparentBlue me-3" id="deletedocbtn">Yes</button>
                <button type="button" class="btn btn-transparentRed close-dash-modal">No</button>
            </div>
        </div>
    </div>
</div>


<!-- Update password form success modal -->
<div class="dash-modal" id="updatepass">
    <div class="dash-modal-container">
        <div class="status-info">
            <img src="{{asset('/assets/images/profile/success.png')}}" />
            <span class="text">Password Updated Successfully</span>
            <button type="button" class="btn btn-blue close-dash-modal">Close</button>
        </div>
    </div>
</div>



@endsection

@section('scripts')

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11.6.5/dist/sweetalert2.min.js"></script>



<script src="{{ asset('/assets/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('/assets/js/dataTables.bootstrap5.min.js') }}"></script>
<!-- Datepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>


<!-- Select2 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script src="{{asset('assets/js/PasswordValidatorv2.js')}}"></script>

<script type="text/javascript">
$(document).ready(function () {
    $('.first_errormsg').hide();
    $('#investsummary').DataTable();
    $('#walletsummary').DataTable();
    $('[data-bs-toggle="tooltip"]').tooltip();

    $('#saveprofileinfo').on("click", function () {
        $('#tab1_title').removeClass('taberror');
        var t1=1;
        var nm='';
        if($('#first_name').val()==''){t1=0;nm='first_name';}
        else if($('#last_name').val()==''){t1=0;nm='last_name';}
        else if($('#country').val()==''){t1=0;nm='country';}
        else if($('#postalcode').val()==''){t1=0;nm='postalcode';}
        else if($('#city').val()==''){t1=0;nm='city';}

        if(t1==0){
            $('#tab1_title').click();
            $('#tab1_title').addClass('taberror');
            $('html, body').animate({scrollTop: $('#'+nm).offset().top -200 }, 'slow');
        }
    })
});

$(document).ready(function() {
    $("#token-aquired-slider").owlCarousel({
        items: 3,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [980, 3],
        itemsMobile: [768, 3],
        navigation: true,
        navigationText: ["", ""],
        pagination: true,
        autoPlay: false
    });
    $("#token-request-slider").owlCarousel({
        items: 3,
        itemsDesktop: [1199, 3],
        itemsDesktopSmall: [980, 3],
        itemsMobile: [768, 3],
        navigation: true,
        navigationText: ["", ""],
        pagination: true,
        autoPlay: false
    });
});

/*
$( '.select2' ).select2( {
    theme: "bootstrap-5",
    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
    placeholder: $( this ).data( 'placeholder' ),
    closeOnSelect: false,
});
*/

$('.datepicker').datepicker({
    format: 'yyyy-mm-dd'
});





PasswordValidator.minSize = 8;
PasswordValidator.maxSize = 16;
PasswordValidator.specialConfigured = true; // Default
PasswordValidator.prohibitedConfigured = false;
PasswordValidator.prohibitedCharacters = [];
PasswordValidator.setup('new_password', 'new_password_confirmation');



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


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

$('.doctype').append(docOptions);



$(document).on("click", ".removedocument ", function () {
    //console.log($(this).parent());
    var dataId=$(this).attr("data-id");
    if(dataId){remDocProof(dataId, $(this).parents("tr"));}
    else{$(this).parents("tr").remove();}
});

function remDocProof(id, trrr){
    Swal.fire({
        title     : "Are you sure?",
        text      : "You are about to remove a document. Once removed, it can not be retrieved.\n\nDo you want to proceed?",
        icon      : "warning",
        showConfirmButton : true,
        showCancelButton   : true
    }).then( (result) => {
        if(result.isConfirmed){
        $.ajax({
            type: "POST",
            url: "{{url('/removedocument')}}",
            data: {
                'id': id,
                '_token': '{{ csrf_token() }}'
            },
            success: function (data) {
                if(data==1){
                    trrr.remove();
                    Swal.fire({text:'The document is removed'});
                }else{
                    Swal.fire({text:'An error occurred. Please try again after some time.'});
                }
            }
        });
    }
})
}


// Profile form tabs
$(document).on('click','.tab-index', function () {
    var exploreid = $(this).attr('data-tab');
    $(this).parent('.form-tab').find('.tab-index').removeClass('active');
    $(this).addClass('active');
    $('.form-tab-explorer').removeClass('active');
    $('#' + exploreid).addClass('active');

    if(exploreid == 'tab1' && $('#editprofileinfo').hasClass('d-none')) {
        $('#nextprofileinfo').removeClass('d-none');
        $('#saveprofileinfo').addClass('d-none');
        $('.btn-wrap-abs').removeClass('d-none');
    }

    if(exploreid == 'tab2' && $('#editprofileinfo').hasClass('d-none')) {
        $('#nextprofileinfo').addClass('d-none');
        $('#saveprofileinfo').removeClass('d-none');
    }

    if(exploreid == 'tab3') {
        $('.btn-wrap-abs').addClass('d-none');
    }else{
        $('.btn-wrap-abs').removeClass('d-none');
    }
});


// Profile edit form button
$(document).on('click','#editprofileinfo', function () {
    $(this).addClass('d-none');
    $('#cancenprofileinfo').removeClass('d-none');
    var curTab = $('.tab-index.active').attr('data-tab');
    if(curTab == 'tab1') {
        $('#nextprofileinfo').removeClass('d-none');
        $('#saveprofileinfo').addClass('d-none');
    }
    if(curTab == 'tab2') {
        $('#nextprofileinfo').addClass('d-none');
        $('#saveprofileinfo').removeClass('d-none');
    }
    $(this).parents('form').find('input,select,textarea').each( function () {
        $(this).attr('disabled', false);
    });
    $('.adddocument').css('display','inline-block');
    $('#doclistaction').css('display','table-cell');
    $('.toggleedit').css('display','table-cell');
});

$(document).on('click','#nextprofileinfo', function () {
    $('.first_errormsg').hide();
    var d=1;
    if($('#first_name').val()==''){d=0;}
    if($('#last_name').val()==''){d=0;}
    if($('#country').val()==''){d=0;}
    if($('#postalcode').val()==''){d=0;}
    if($('#city').val()==''){d=0;}

    if (d==1) {
        var curTab = $('.form-tab').find('.tab-index.active');
        var nextTab = curTab.next('.tab-index');
        curTab.removeClass('active');
        nextTab.addClass('active');
        var newExplorer = nextTab.attr('data-tab');
        $('.form-tab-explorer.active').removeClass('active');
        $('#' + newExplorer).addClass('active');
        $(this).addClass('d-none');
        $('#saveprofileinfo').removeClass('d-none');
    }
    else{
        $('.first_errormsg').show();
    }


});

// Profile form submit
$(document).on('click', '.close-dash-modal', function() {
    $(this).parents('.dash-modal').css('display','none');
});

// Add new document
$(document).on('click', '.adddocument', function () {
    $('#addnewdocmodal').css('display','block');
});

$(document).on('submit', '#adddocform', function (e) {
    e.preventDefault();
    var form = $('#adddocform');
    var er = 0;
    var docType=$('#doctype').val();
    var docNum=$('#docnumber').val();
    var exDt=$('#expdate').val();
    if(docType==''){er++;}
    if(docNum==''){er++;}
    if(exDt==''){er++;}

    if(er == 0){
        $('#errormsg').css('display','none');

        var trow=parseInt($('#trow').val())+1;
        $('#trow').val(trow);

        var nrow='<tr id="'+trow+'">';
        nrow+='<td>';
        nrow+='<span class="highlight">'+docType+'</span>';
        nrow+='</td>';
        nrow+='<td>'+docNum+'</td>';
        nrow+='<td>'+exDt+'</td>';
        nrow+='<td class="toggleedit show">';
        nrow+='<input type="hidden" name="accredited_kyc_select['+trow+'][type]" value="'+docType+'" />';
        nrow+='<input type="hidden" name="accredited_kyc_select['+trow+'][number]" value="'+docNum+'" />';
        nrow+='<input type="hidden" name="accredited_kyc_select['+trow+'][expiry]" value="'+exDt+'" />';
        nrow+='<button type="button" class="dash-btn editdoc me-2"></button>';
        nrow+='<button type="button" class="dash-btn deletedoc removedocument"></button>';
        nrow+='</td>';
        nrow+='</tr>';

        $('#doclist').find('tbody').append(nrow);

        form.parents('.dash-modal').css('display','none');
        form.find('input, select').each(function(){
            $(this).val('');
        });

    }else{
        $('#errormsg').css('display','block');
    }

    return false;
});

// Edit doc
$(document).on('click', '.editdoc', function () {
    var rowid = $(this).parents('tr').attr('id');

    var doctype = $(this).parents('tr').find('input[name="accredited_kyc_select['+rowid+'][type]"]').val();
    var docnum = $(this).parents('tr').find('input[name="accredited_kyc_select['+rowid+'][number]"]').val();
    var expdate = $(this).parents('tr').find('input[name="accredited_kyc_select['+rowid+'][expiry]"]').val();

    $('#ex_trow').val(rowid);
    $('#editdocmodal').find('#ex_doctype').val(doctype);
    $('#editdocmodal').find('#ex_docnumber').val(docnum);
    $('#editdocmodal').find('#ex_expdate').val(expdate);

    $('#editdocmodal').css('display','block');

});

$(document).on('submit', '#editdocform', function (e) {
    e.preventDefault();
    var editId = $('#ex_trow').val();
    var form = $('#editdocform');
    var er = 0;
    var docType=$('#ex_doctype').val();
    var docNum=$('#ex_docnumber').val();
    var exDt=$('#ex_expdate').val();
    if(docType==''){er++;}
    if(docNum==''){er++;}
    if(exDt==''){er++;}

    if(er == 0){
        $('#ex_errormsg').css('display','none');

        var nrow='<tr id="'+editId+'">';
        nrow+='<td>';
        nrow+='<span class="highlight">'+docType+'</span>';
        nrow+='</td>';
        nrow+='<td>'+docNum+'</td>';
        nrow+='<td>'+exDt+'</td>';
        nrow+='<td class="toggleedit show">';
        nrow+='<input type="hidden" name="accredited_kyc_select['+editId+'][type]" value="'+docType+'" />';
        nrow+='<input type="hidden" name="accredited_kyc_select['+editId+'][number]" value="'+docNum+'" />';
        nrow+='<input type="hidden" name="accredited_kyc_select['+editId+'][expiry]" value="'+exDt+'" />';
        nrow+='<button type="button" class="dash-btn editdoc me-2"></button>';
        nrow+='<button type="button" class="dash-btn deletedoc removedocument"></button>';
        nrow+='</td>';
        nrow+='</tr>';

        $('#' + editId).replaceWith(nrow);
        form.parents('.dash-modal').css('display','none');
        form.find('input').each( function () {
            $(this).val('');
        });


    }else{
        $('#ex_errormsg').css('display','block');
    }

});

// Delete doc modal

$(document).on('click', '#deletedocbtn', function () {
    var curbtn = $(this);
    var docid = $(this).prev('input[name="deletdocid"]').val();

    $('#' + docid).remove();
    curbtn.parents('.dash-modal').css('display','none');
});



</script>



@endsection