@extends('backend.layouts.app')

@section('title', 'Add KYC')
@section('page-title', 'Add KYC')
@section('page-breadcrumb', 'Add KYC')


@section('content')

<div class="content mt-3">

<div class="animated fadeIn">


                <div class="row">
                    <div class="col-lg-12">

                    <div class="card">
<h5 class="card-header">
    <strong><i class="fa fa-user-plus fa-lg"></i> Add KYC</strong>
     @if(Auth::user()->user_type>4)
     <a href="KycList" class="btn-sm btn-warning btn-rounded float-right">
        <i class="fa fa-list fa-lg"></i> KYC List
    </a>
    @endif
</h5>
<!--Card content-->


 <form class="card" action="{{route('save_Kyc')}}" method="POST" enctype="multipart/form-data" >
   @csrf

   <div class="card-body">

             <div class="card-body ">

                 @if(Auth::user()->user_type>4)
                 <div class="row" style="min-height: 3.5rem;">
                             <div class="custom-control-inline customRadio" style="">

                                 <span class="toggle__text">Select User</span>
                             </div>
                             <div class="col-md-4" id="SelectChild_div">
                                 <select style="" id="SelectChild" class="form-control valid chosen" onchange="GetKycdetailsAjax(this.value)" name="SelectedChild" aria-invalid="false">
                                     <option value="">Select Child</option>
                                     @foreach($users_list as $user)
                                       <option @if(Auth::user()->id==$user->id) selected @endif value="{{$user->id}}"> {{$user->user_id}} - {{$user->first_name}}</option>
                                       @endforeach

                                </select>

                             </div>
                 </div>
                 @endif
                 <div id="KycStatusMessage" style="display: none;"></div>
                 <div id="OtherKycForm">

     <div class="form-group row">
         <label class=" col-sm-2 col-form-label" for="IUserImage">User Photo<span class="text-danger"> *</span></label>
         <div class="col-md-4">
             <div class="custom-file">
                 <input class="custom-file-input custom-file-input IsRequired" id="user_img" type="file" name="user_img" required="required">
                 <label class="custom-file-label">Choose User Image</label>
                 <samp class="small text-muted">Max upload file size: 250KB</samp>
                 <span id="user_img_span" class="UserPhotoSpan ImageLink text-success" style="">{{Auth::user()->user_img}}</span>
                 <input type="hidden" id="user_img_old" name="user_img_old" value="{{Auth::user()->user_img}}" autocomplete="off">
             </div>

         </div>

     </div>

 <div class="form-group row">
     <label class=" col-sm-2 col-form-label" for="AadhaarNo">Aadhaar Number<span class="text-danger"> *</span></label>
     <div class="col-md-4">
         <input type="text" id="aadhar_no" placeholder="Enter Aadhaar Number" maxlength="10" class="form-control" required="" name="aadhar_no" value="{{Auth::user()->aadhar_no}}">

     </div>

     <div class="col-md-4">
         <div class="custom-file">
             <input class="custom-file-input custom-file-input IsRequired" type="file"  id="aadhar_img" name="aadhar_img" required="required">
             <label class="custom-file-label">Choose Aadhar Image</label>
             <samp class="small text-muted">Max upload file size: 250KB</samp>
             <span id="aadhar_img_span" class="AadharImageSpan ImageLink text-success" style="">{{Auth::user()->aadhar_img}}</span>
             <input type="hidden" id="aadhar_img_old" name="aadhar_img_old" value="{{Auth::user()->aadhar_img}}" autocomplete="off">
         </div>

     </div>

 </div>

 <div class="form-group row">
     <label class=" col-sm-2 col-form-label" for="PanNo">PAN Number<span class="text-danger"> *</span></label>
     <div class="col-md-4">
         <input type="text" placeholder="Enter Pan Number" class="form-control" required="" maxlength="10" id="pan_no" name="pan_no" value="{{Auth::user()->pan_no}}">

     </div>

     <div class="col-md-4">
         <div class="custom-file">
             <input class="custom-file-input custom-file-input IsRequired" type="file" id="pan_img" name="pan_img" required="required">
             <label class="custom-file-label">Choose Pan Image</label>
             <samp class="small text-muted">Max upload file size: 250KB</samp>
             <span id="pan_img_span" class="PanImageSpan ImageLink text-success" style=""></span>
             <input type="hidden" id="pan_img_old" name="pan_img_old" value="{{Auth::user()->pan_img}}" autocomplete="off">
         </div>

     </div>
 </div>
 <div class="form-group row">
     <label class=" col-sm-2 col-form-label" for="Remark">Remark</label>
     <div class="col-md-4">
         <textarea class="form-control" id="kyc_remarks" name="kyc_remarks">{{Auth::user()->remarks}}</textarea>
     </div>

 </div>
 <div class="form-group">
     <label class="col-xs-3 control-label font-weight-bold">Terms of use</label>
     <div class="col-xs-9">
         <div style="border: 1px solid #e5e5e5; height: 110px; overflow: auto; padding: 10px;">
             <p>
                 KYC DOCUMENTS ,submit self attested documenmentation proof for one of each of two
                 below i tick the below mentioned documents submitted by me , I am hereby declare that
                 all the statements made by me in this application form are true and complete to the
                 best of my knowledge, I confirm that i have myself submitted the copies of my identity
                 and adress proof documents for the purpose of KYC as mentioned above.
             </p>
         </div>
     </div>
 </div>
                 </div>
             </div>
         </div>


    <div class="card-footer">
        <button type="submit" class="btn btn-primary btn-sm waves-effect waves-light">
            Submit <i class="fa fa-arrow-circle-right fa-lg"></i>
        </button>
        <button type="button" onclick="history.back();" class="btn btn-danger btn-sm waves-effect waves-light">
            Back <i class="fa fa-arrow-circle-left fa-lg"></i>
        </button>
    </div>





</form>
<!-- Form -->

</div>



    <!-- ============================================================== -->

</div>



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

@endsection

@section('self_script')
<script>
function GetKycdetailsAjax(id){
  var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function() {
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
              var myObj = JSON.parse(xmlhttp.responseText);
              document.getElementById("aadhar_no").value = myObj.aadhar_no;
              document.getElementById("pan_no").value = myObj.pan_no;
              document.getElementById("user_img_old").value = myObj.user_img;
              document.getElementById("user_img_span").innerHTML = myObj.user_img;
              document.getElementById("aadhar_img_old").value = myObj.aadhar_img;
              document.getElementById("pan_img_old").value = myObj.pan_img;
              document.getElementById("aadhar_img_span").innerHTML = myObj.aadhar_img;
              document.getElementById("pan_img_span").innerHTML = myObj.pan_img;
              document.getElementById("kyc_remarks").value = myObj.kyc_remarks;
       }
   }
   xmlhttp.open("GET", "getUserById?id="+id, true);
   xmlhttp.send();
}

</script>
@endsection