@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">Verify Aadhar</h6>
    </div>
      <div class="card-body">
        
        <div class="container-fluid">
            <br>
            <div class="row">
                <div class="col-md-1 col-sm-1 col-xs-1"></div>
                <div class="col-md-5 col-sm-5 col-xs-5">
                    <label class="control-label" style="margin-left:5px;font-weight:bold;">Enter Aadhaar Number / VID</label>
                </div>
                <div class="col-md-4 col-sm-4 col-xs-4" style="padding-bottom:10px;">
                    <input type="password" id="txtAadhaarVid" class="form-control" maxlength="16" value="{{$AadharEnrolmentNumber}}" />
                </div>
                <div class="col-md-1 col-sm-1 col-xs-1" style="padding-bottom:10px;">
                    <input type="checkbox" class="form-check-input" id="chkShowPassword" style="cursor:pointer;padding-left:5px;" onclick="showMaskAadhaar()">
                    <label class="form-check-label" for="chkShowPassword" style="cursor:pointer;font-weight:normal;">Show</label>
                </div>
                <div class="col-md-1 col-sm-1 col-xs-1"></div>
            </div>
            <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="checkbox">
                        <label class="control-label" id="lblResidentConsent" style="text-align:left;margin-left:5px;font-weight:normal;"><input type="checkbox" id="chkConsent">
                             I hereby consent to provide my Aadhaar Number and One Time Pin (OTP) data for Aadhaar based authentication for the purpose of establishing my identity and providing demographic details for the demo application. I have no objection in authenticating myself and fully understand that information provided by me shall be used for authenticating my identity through Aadhaar Authentication System for the purpose stated above and no other purpose.<br><br></label>
                    </div>
                </div>
                <div class="col-md-1 col-sm-1 col-xs-1"></div>
            </div>
            <br>
            <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" style="text-align:left">
                    <div class="checkbox">
                        <label class="control-label" style="text-align:left;margin-left:5px;font-size:20px;">Please generate OTP now</label>
                    </div>
                </div>
                <div class="col-md-1 col-sm-1 col-xs-1"></div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-1 col-sm-1 col-xs-1"></div>
                <div class="col-md-8 col-sm-8 col-xs-8">
                    <div class="form-check" style="padding-left:0px;" >
                        <button id="btnGenerateOTP" class="btn btn-primary" onclick="onGenerateOTP()">Generate OTP</button>
                    </div>
                </div>
                <div class="col-md-1 col-sm-1 col-xs-1"></div>
                <br>
            </div>
            
            <div class="row" id="divMessage" style="display:none;">
                <div class="col-md-1 col-sm-1 col-xs-1"></div>
                <div class="col-md-10 col-sm-10 col-xs-10" style="text-align:left; padding-left:10px;padding-top:20px;">
                    <span id="spnResult" style="color: green; font-weight: bold; font-size: 18px;"></span>
                </div>
            </div>
        
            <div class="row" style="padding-top:15px;">
                <div class="col-md-1 col-sm-1 col-xs-1"></div>
                <div class="col-md-3 col-sm-3 col-xs-3" style="">
                    <input type="password" class="form-control" name="otpToValidate" id="txtOtpToValidate" placeholder="OTP" autocomplete="off" maxlength="6" inputmode="tel" pattern="[0-9]*" disabled="" >
                </div>
                <div class="col-md-6 col-sm-6 col-xs-6" style="text-align:left;">
                    <button id = "btnValidateOTP" class="btn btn-success" disabled onclick="onValidateOtp()">Validate OTP</button>
                
                </div>
                <div class="col-md-1 col-sm-1 col-xs-1"></div>
            </div>

            <div class="row" style="padding-top:15px;">
                <div class="col-md-1 col-sm-1 col-xs-1"></div>
                <div class="col-md-10 col-sm-10 col-xs-10" style="">
                    <label class="control-label" style="text-align:left;margin-left:5px;font-size:14px;font-weight:bold">Please validate the OTP within 10 minutes of receiving it</label>
                </div>
                <div class="col-md-1 col-sm-1 col-xs-1"></div>
            </div>

            <hr>

        </div>
<br><br>

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

        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: true,
            SENDEMAIL: false,
        },
        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;
            } 
            if(resp.success){
                   window.location='{{route('registration')}}';
            }else{
                window.location='{{route('login-page')}}';
            }                
         
        },
        error: function(xhr, textStatus, error) {
            $('#spnResult').html(error.message);
            $('#spnResult').css("color", "red");
            $('#divMessage').show();
            return false;
        }});			
    }
 
</script>

@endpush