@extends('backend.layouts.app')

@section('title', 'Kyc List')
@section('page-title', 'Kyc List')
@section('page-breadcrumb', 'Kyc List')


@section('content')

<div class="content mt-3">

<div class="animated fadeIn">


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



<div class="card">
    <div class="card-header card-header-color">
        <span class="h4"><i class="fa fa-list-alt"></i> Kyc List</span>
        <a href="Kyc" class="btn-sm btn-success btn-rounded float-right"><i class="fa fa-user-plus fa-lg"></i> Add Kyc</a>
        <input type="hidden" value="6" id="RequestedRoleId" autocomplete="off">
    </div>


    <!--Card content-->
    <div class="card-body">
                                <table id="bootstrap-data-table-export" class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>UserId</th>
                                            <th>FullName</th>
                                            <th>User Type</th>
                                            <th>Submission Date</th>
                                            <th>Verfication Date</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                      @foreach($users_list as $user)
                                      <tr>
                                        <td>{{$user->user_id}}</td>
                                        <td>{{$user->first_name}} {{$user->last_name}}</td>
                                        <td>{{$user_type[$user->user_type]}}</td>
                                        <td>{{$user->kyc_date}}</td>
                                        <td>{{$user->kyc_verfied_on}}</td>
                                        <td>{{$user->kyc_status}}</td>
                                        <td>
                                          @if($user->kyc_status=='Pending')



                                          <span class="d-none" id="UserImage_{{$user->id}}">{{$user->user_img}}</span>
                                          <span class="d-none" id="AadhaarImage_{{$user->id}}">{{$user->aadhar_img}}</span>
                                          <span class="d-none" id="PanImage_{{$user->id}}">{{$user->pan_img}}</span>
                                          <span class="sertcursure btn btn-danger btn-xs" data-toggle="modal" onclick="OpenKycForm({{$user->id}},this)">
                                            <i class="fa fa-edit"></i>
                                          </span>

                                          @endif




                                        </td>
                                      </tr>
                                      @endforeach



                                    </tbody>
                                </table>
                            </div>
</div>
<!-- Form -->





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

</div>



</div>
</div>



<div class="modal fade" id="KycVerify" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true">
                    <form action="" method="post" id="UserKycListSearch" class="form-horizontal ng-pristine ng-valid">
                      @csrf
                      <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="mediumModalLabel">Medium Modal</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                              <div class="card-body">
                      <div class="row">
                          <!-- Card Wider -->
                          <div class="card card-cascade col-sm-4">
                              <!-- Card content -->
                              <div class="card-body card-body-cascade text-center">

                                  <!-- Title -->
                                  <h4 class="card-title"><strong>Photo</strong></h4>
                                  <a class="btn btn-unique DownloadImage waves-effect waves-light" id="UserImageSpan" data="_20200624095009473_ED160.PNG">
                                    <i class="fa fa-download"></i> Photo</a>
                              </div>

                          </div>
                          <!-- Card Wider -->
                          <!-- Card Narrower -->
                          <div class="card card-cascade col-sm-4">

                              <!-- Card content -->
                              <div class="card-body card-body-cascade text-center">
                                  <!-- Title -->
                                  <h4 class="card-title"><strong>Pan Card</strong></h4>
                                  <a class="btn btn-unique DownloadImage waves-effect waves-light" id="AadhaarImageSpan" data="_20200624095009485_95F79.JPG">
                                    <i class="fa fa-download"></i>  Pan</a>
                              </div>
                          </div>

                          <!-- Card Narrower -->
                          <!-- Card Regular -->
                          <div class="card card-cascade col-sm-4">
                              <!-- Card content -->
                              <div class="card-body card-body-cascade text-center">
                                  <!-- Title -->
                                  <h4 class="card-title"><strong>Aadhaar Card</strong></h4>
                                  <a class="btn btn-unique DownloadImage waves-effect waves-light" id="PanImage" data="_20200624095009489_833E4.PNG">
                                    <i class="fa fa-download"></i>  Aadhaar</a>
                              </div>
                          </div>
                          <!-- Card Regular -->
                      </div>
                      <hr>
                      <div class="row">
                          <div class="col-md-6">
                              <div class="form-group row">
                                  <label class="col-sm-4 col-form-label"><strong>User Name :</strong></label>
                                  <div class="col-sm-8 col-form-label" id="UserNameSpan">Sonu</div>
                              </div>
                              <div class="form-group row">
                                  <label class="col-sm-4 col-form-label"><strong>User Id :</strong></label>
                                  <div class="col-sm-8 col-form-label" id="UserIdSpan">NBBB000375</div>
                                  <div class="col-sm-8 col-form-label" id="CredentialIdSpan" style="display:none">375</div>
                              </div>
                              <div class="form-group row">
                                  <label class="col-sm-4 col-form-label"><strong>Requested Date :</strong></label>
                                  <div class="col-sm-8 col-form-label" id="RequestedSpan">24-06-2020</div>
                              </div>
                          </div>
                          <div class="col-md-6">
                              <div class="form-group row">
                                  <label class="col-sm-4 col-form-label"><strong>Status:</strong></label>
                                  <div class="col-sm-8 col-form-label">
                                      <select class="form-control" id="CurrentStatus">
                                          <option value="Pending">Pending</option>
                                              <option value="Review">Review</option>
                                              <option value="Approved">Approved</option>
                                      </select>
                                  </div>
                              </div>
                              <div class="form-group row">
                                  <label class="col-sm-4 col-form-label"><strong>Remark:</strong></label>
                                  <div class="col-sm-8 col-form-label">
                                      <textarea class="form-control" id="Remark" rows="3" placeholder="Write something here..."></textarea>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                <button type="button" class="btn btn-primary" onclick="UpdateKyc()">Confirm</button>
                            </div>
                        </div>
                    </div>
                  </form>
                </div>



</div>






@endsection

@section('self_script')
<script src="{{ asset('assets/vendor/datatables.net/js/jquery.dataTables.min.js') }}"></script>
   <script src="{{ asset('assets/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>




   <script src="{{ asset('assets/js/init-scripts/data-table/datatables-init.js') }}"></script>

<script>
   function OpenKycForm(Id, e) {
	var cells_data = $(e).closest("tr")[0].cells;

	if (Id != "") {
		$("#CredentialIdSpan").html(Id);
		$("#UserIdSpan").html(cells_data[0].innerText);
		$("#UserNameSpan").html(cells_data[1].innerText);
		$("#RequestedSpan").html(cells_data[3].innerText);

		$("#UserImageSpan").attr('data', $("#UserImage_" + Id).html());
		$("#AadhaarImageSpan").attr('data', $("#AadhaarImage_" + Id).html());
        $("#PanImage").attr('data', $("#PanImage_"+ Id).html());

		$("#CurrentStatus").val(cells_data[5].textContent);
		$("#KycVerify").modal("show");
	}
}

function UpdateKyc() {
        var Id = $("#CredentialIdSpan").html();
        if (Id != "") {
            var Kyc = new Object();
            Kyc.CredentialId = Id;
            Kyc.Status = $("#CurrentStatus").val();
            Kyc.Remark = $("#Remark").val();
            Kyc._token=$('input:hidden[name="_token"]').val();
            if (Kyc.Status == "Review" && Kyc.Remark == "") {
                alert("Enter remark");
                return true;
            }

            $.ajax({
                    type: "POST",
                    url: "UpdateKyc",
                    data: JSON.stringify(Kyc),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                   // console.log(response);
                        if (response == "1") {
                            alert("Kyc updated Successfully");
                            $("#KycVerify").modal("hide");
                            location.reload();

                        } else {
                            alert("Kyc Not Updated");
                            $("#KycVerify").modal("hide");
                        }
                    },
                    failure: function (response) {
                        alert(response);
                    }
                });
        }
    }

    $(".DownloadImage").click(function () {
          var Image = $(this).attr("data");
          //var Image = $(this).attr("src");
            if (Image != "") {
              window.location.href = "kyc_download?filename="+Image+"";
            }
         })
</script>

@endsection