@extends('admin.layout.baseNew')

@section('content')

<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 admin-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>User Details</h2>
                    </div>
                    <div class="infobar">
                        <div class="breadcrumb">
                            <a href="{{ route('admin.home') }}">Dashboard</a>
                            <span class="divider"></span>
                            <a href="{{ url('/admin/user') }}">Users</a>
                            <span class="divider"></span>
                            <a>Details</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-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="row justify-content-center">
                    <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
                        <div class="ucard p-3">

                        @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>

                            @if((isset($user->identity->primary_phone)) && ($user->identity->primary_phone != '') )
                            <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>
                            @endif

                            @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>
    </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>

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

$('.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