@extends('layouts.login')
@section('title')
All Brands
@endsection
@section('content')
@php

 
@endphp

    <div class="card card-white mb-4">
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-normal text-head-color">Aadhaar KYC Details</h6>
    </div>
      <div class="card-body">
        
        <div class="container-fluid text-center">

            <div class="container-fluid text-center">
	
                <div class="row">
                    <div class="col-md-1 col-sm-1 col-xs-1"></div>
                    <div class="col-md-10 col-sm-10 col-xs-10 text-left" style="border-bottom:1px solid #D3D3D3;">
                        
            
                        <div class="row">
                            <div class="col-sm-2">
                                <img id="kyc_Photo" src="data:image/jpg;base64," style="height: 180px;">
                            </div>
                            <div class="col-sm-10">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">Aadhaar Number</label>
                                        <div id="kyc_aadhaar" style="color: #41444b;"></div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">KYC Time Stamp</label>
                                        <div id="kyc_timestamp" style="color: #41444b;"></div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">KYC Reference #</label>
                                        <div id="kyc_referenceNo" style="color: #41444b;"></div>
                                    </div>
                                </div>
                                <div class="row" style="padding-top:10px;">
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">Name</label>
                                        <div style="color: #41444b;"></div>
                                            <div style="color: #41444b;"></div>
                                      </div>
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">Date of Birth</label>
                                        <div style="color: #41444b;"></div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">Gender</label>
                                        <div style="color: #41444b;"></div>
                                    </div>
                                </div>
                                <div class="row" style="padding-top:10px;">
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">Care Of</label>
                                        <div style="color: #41444b;"></div>
                                            <div style="color: #41444b;"></div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">House</label>
                                        <div style="color: #41444b;"></div>
                                            <div style="color: #41444b;"></div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">Street</label>
                                        <div style="color: #41444b;"></div>
                                            <div style="color: #41444b;"></div>
                                    </div>
                                </div>
                                <div class="row" style="padding-top:10px;">
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">Landmark</label>
                                        <div style="color: #41444b;"></div>
                                            <div style="color: #41444b;"></div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">Locality</label>
                                        <div style="color: #41444b;"></div>
                                            <div style="color: #41444b;"></div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">VTC</label>
                                        <div style="color: #41444b;"></div>
                                            <div style="color: #41444b;"></div>
                                    </div>
                                </div>
                                <div class="row" style="padding-top:10px;">
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">SubDistrict</label>
                                        <div style="color: #41444b;"></div>
                                            <div style="color: #41444b;"></div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">District</label>
                                        <div style="color: #41444b;"></div>
                                            <div style="color: #41444b;"></div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">State</label>
                                        <div style="color: #41444b;"></div>
                                            <div style="color: #41444b;"></div>
                                    </div>
                                </div>
                                <div class="row" style="padding-top:10px;">
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">Post Office</label>
                                        <div style="color: #41444b;"></div>
                                            <div style="color: #41444b;"></div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">Pincode</label>
                                        <div style="color: #41444b;"></div>
                                            <div style="color: #41444b;"></div>
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="ecsLabel">Country</label>
                                        <div style="color: #41444b;"></div>
                                            <div style="color: #41444b;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

      </div>
    </div>
    
@endsection


@push('js')

<script>
            
    var otpTxnId = null;

    function showMaskAadhaar() {
        var x = document.getElementById("txtAadhaarVid");
        if (x.type === "password") {
            x.type = "text";
        } else {
            x.type = "password";
        }
    }

    function onGenerateOTP() {

        var aadhaarNumber = $('#txtAadhaarVid').val();
        var consent = $('#lblResidentConsent').html();
        var sendSMS = $('#chkSMS').is(':checked');
        var sendEmail = $('#chkEmail').is(':checked');

        if(aadhaarNumber.trim().length !== 12) {
            alert("Please enter valid aadhaar number")
            return;
        }
        var consentAccepted = $('#chkConsent').is(':checked');
        if(!consentAccepted) {
            alert("Please accept consent");
            return;
        }

        $.ajax({
        type: 'POST',

        url: "{{ url('generate-otp') }}",
        // url: 'generateOtp.php',
        data: {
            "_token": "{{ csrf_token() }}",
            AADHAARNUMBER: aadhaarNumber,
            CONSENT: consent,
            SENDSMS: sendSMS,
            SENDEMAIL: sendEmail,
        },
        success: function(resp){
            if(resp.error){
                $('#spnResult').html(resp.errorMessage);
                $('#spnResult').css("color", "red");
                $('#divMessage').show();
                return false;
            }

            var message = "Otp generated successfully";
            var mobileAdded = false;
            if(resp.maskedMobile !== undefined && resp.maskedMobile !== "" && resp.maskedMobile !== "NA" && resp.maskedMobile !== null) {
                message = message + " to " + resp.maskedMobile;
                mobileAdded = true;
            }

            if(resp.maskedEmail !== undefined && resp.maskedEmail !== "" && resp.maskedEmail !== null) {
                if(mobileAdded) {
                    message = message + " and";	
                } else {
                    message = message + " to";
                }

                message = message + " " + resp.maskedEmail;
            }

            otpTxnId = resp.otpTxnId;
            $('#spnResult').html(message);
            $('#spnResult').css("color", "green");
            $('#divMessage').show();

            $('#btnGenerateOTP').attr("disabled", true);
            $('#btnValidateOTP').removeAttr("disabled");
            $('#btnCancel').removeAttr("disabled");
            $('#txtOtpToValidate').removeAttr("disabled");
        },
        error: function(xhr, textStatus, error){
            $('#spnResult').html(error.message);
            $('#spnResult').css("color", "red");
            $('#divMessage').show();
            return false;
        }});			
    }

    function onValidateOtp() {
        var aadhaarNumber = $('#txtAadhaarVid').val();
        var consent = $('#lblResidentConsent').html();
        var otpValue = $('#txtOtpToValidate').val();

        $.ajax({
        type: 'POST',
        url: "{{ url('validate-otp') }}",
        // url: 'validateOtp.php',
        data: {
            "_token": "{{ csrf_token() }}",
            AADHAARNUMBER: aadhaarNumber,
            CONSENT: consent,
            OTPVALUE: otpValue,
            OTPTXNID: otpTxnId,
        },
        success: function(resp){
            if(resp.error){
                $('#spnResult').html(resp.errorMessage);
                $('#spnResult').css("color", "red");
                $('#divMessage').show();
                return false;
            }            
            //Show the result
            window.location='{{url('kycResult')}}';
        },
        error: function(xhr, textStatus, error) {
            $('#spnResult').html(error.message);
            $('#spnResult').css("color", "red");
            $('#divMessage').show();
            return false;
        }});			
    }
 
</script>

@endpush