maqsudinamdar/gist:1afe967b20ed4e1272fd8fc32079c964

## gistfile1.txt
<!DOCTYPE html>
<html>

<head>
    @include('borrower.layout.head')
</head>


<style>

    ul {
        list-style: none;
        padding: 0
    }

    #widget{
        display: none;
    }
    #widget .wid_right>li {
        font-size: 15px;
    }

    #widget .wid_right>li:last-child {
        text-transform: uppercase
    }

    #widget .wid_right>li:last-child p {
        color: #d11c26;
        margin-bottom: 0
    }

    #widget .wid_right>li p.smtxt {
        margin: 0;
        font-size: 13px;
        font-weight: 400;
        text-transform: capitalize;
        color: #212529;
    }

    #widget .wid_right>li p {
        display: block;
        margin-bottom: 28px;
        font-size: 21px;
        font-weight: 700;
        color: #4a4a4a
    }

    #widget .wid_right>li p i {
        font-size: 0.8em
    }

    #widget .ui-widget.ui-widget-content {
        background: #b9b9b9;
        border: none;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        height: 3px;
        margin-top: 14px;
    }

    #widget .ui-widget-header {
        background: #d11c26;
        /* height: 3px; */
    }

    #widget .ui-slider .ui-slider-handle {
        width: 12px;
        height: 12px;
        cursor: pointer;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 40px;
        background: #e31e24;
        border: none;
        top: -5px;
        outline: none;
    }
    input {
        margin-bottom: 15px;
    }

    #otpDiv {
        display: none;
    }

    #loan-form {
        display: none;
    }

    #test2 {
        display: none;
    }
    #snackbar {
        visibility: hidden;
        min-width: 250px;
        margin-left: -125px;
        background-color: #1796d4;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px;
        font-size: 17px;
    }

    #snackbar.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    @-webkit-keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }

        to {
            bottom: 30px;
            opacity: 1;
        }
    }

    @keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }

        to {
            bottom: 30px;
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeout {
        from {
            bottom: 30px;
            opacity: 1;
        }

        to {
            bottom: 0;
            opacity: 0;
        }
    }

    @keyframes fadeout {
        from {
            bottom: 30px;
            opacity: 1;
        }

        to {
            bottom: 0;
            opacity: 0;
        }
    }

    #snackbar3 {
        visibility: hidden;
        min-width: 250px;
        margin-left: -125px;
        background-color: #1796d4;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px;
        font-size: 17px;
    }

    #snackbar3.show3 {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    @-webkit-keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }

        to {
            bottom: 30px;
            opacity: 1;
        }
    }

    @keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }

        to {
            bottom: 30px;
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeout {
        from {
            bottom: 30px;
            opacity: 1;
        }

        to {
            bottom: 0;
            opacity: 0;
        }
    }

    @keyframes fadeout {
        from {
            bottom: 30px;
            opacity: 1;
        }

        to {
            bottom: 0;
            opacity: 0;
        }
    }

    #snackbar2 {
        visibility: hidden;
        min-width: 250px;
        margin-left: -125px;
        background-color: #1796d4;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px;
        font-size: 17px;
    }

    #snackbar2.show2 {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    @-webkit-keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }

        to {
            bottom: 30px;
            opacity: 1;
        }
    }

    @keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }

        to {
            bottom: 30px;
            opacity: 1;
        }
    }

    @-webkit-keyframes fadeout {
        from {
            bottom: 30px;
            opacity: 1;
        }

        to {
            bottom: 0;
            opacity: 0;
        }
    }

    @keyframes fadeout {
        from {
            bottom: 30px;
            opacity: 1;
        }

        to {
            bottom: 0;
            opacity: 0;
        }
    }
</style>

<body>
    <div id="wrapper">
        @include('borrower.layout.navigation')
        <div id="page-wrapper" class="gray-bg">
            @include('borrower.layout.user_check')
            <div class="col-sm-12">
                @if(\Session::has('alert'))
                <div class="alert alert-success">
                    {{\Session::get('alert')}}
                </div>
                @endif
            </div>
            <body>
                <div class="wrapper wrapper-content animated fadeIn">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>Offer Check Form</h5>
                                    <div class="ibox-tools">
                                    </div>
                                </div>
                                <div class="ibox-content table-responsive">
                                    <form method="POST" action="{{ route('borrower.icici.instaOd.postOfferCheck') }}">
                                        {{ csrf_field()}}
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label class="form-label">Mobile Number</label>
                                                <input name="mobileNumber" class="form-control" type="text" pattern="[1-9]{1}[0-9]{9}" maxlength="10" placeholder="Enter Mobile No." id="mobileNumber" oninput="sendOtp()" required>
                                            </div>
                                            <div id="snackbar">OTP has been sent on your mobile number.</div>
                                            <div id="otpDiv" class="col-md-6">
                                                <label class="form-label">OTP</label>
                                                <input name="otp" id="otp" class="form-control" type="text" onchange="sendRequest()" >
                                            </div>
                                            <input name="urn" name="id" value="{{ isset($data['urn']) ? $data['urn'] : ''}}" type="hidden">
                                            <input name="transactionIdentifier" id="transactionIdentifier"
                                                    value="{{ isset($data['transactionIdentifier']) ? $data['transactionIdentifier'] : ''}}" type="hidden">
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="widget" class="row">
                        <div class="col-lg-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5>Offer Details</h5>
                                    <div class="ibox-tools">
                                    </div>
                                </div>
                                <div class="ibox-content table-responsive">
                                    <ul class="wid_right">

                                        <li id="interestRate" style='display:none'>Interest Rate
                                            <p>
                                                <i></i>
                                                <span id="interestRateValue"></span>
                                            </p>
                                        </li>
                                        <li id="maximumAmountOffer" style='display:none'>Maximum Amount Offer
                                            <p>
                                                <i class="fa fa-rupee"></i>
                                                <span id="maximumAmountOfferValue"></span>
                                            </p>
                                        </li>
                                        <li id="maximumTenure" style='display:none'>Maximum Tenure
                                            <p>
                                                <span id="maximumTenureValue"></span>
                                            </p>
                                        </li>

                                        <li id="processingFee" style='display:none'>Processing Fee
                                            <p>
                                                <span id="processingFeeValue"></span>
                                            </p>
                                        </li>

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

                    <div class="row" style="display: flex; justify-content: center;">

                        <button onclick="location.href='{{ route('borrower.icici.instaOd.getBankStatement') }}'"
                            type="button" class="btn btn-primary">
                            Next, Upload Bank Statement</button>

                    </div>

                </div>
            </body>
        </div>
    </div>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    document.getElementById('mobileNumber').addEventListener('input', function(e) {
        e.target.value = e.target.value.replace(/[^\dA-Z]/g, '');
    });

    var mobileNumber;

    var result;

    function sendOtp() {
        mobileNumber = document.getElementById('mobileNumber').value;

        if (mobileNumber.length == 10) {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: "POST",
                data: {
                    "mobileNumber": mobileNumber,
                },
                url: "{{ route('borrower.icici.instaOd.postOfferCheck') }}",
                success: function(data) {
                    console.log(data);
                }
            });

            $('#otpDiv').show();

        }

    }

    function sendRequest() {


        var otp = document.getElementsByName('otp')[0].value;

        if (otp.length == 6 && mobileNumber.length == 10) {
            console.log(otp);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: "POST",
                data: {
                    "mobileNumber": mobileNumber,
                    "otp": otp,
                },
                url: "{{ route('borrower.icici.instaOd.postOfferCheck') }}",
                success: function (data) {

                    populateOfferCheck( data );
                }
            });

        }
    }

    function populateOfferCheck(data){

        $('#widget').show();

        var maxOfferAmt = data.response.offerDetails.maxOfferAmt;
        var maxTenure = data.response.offerDetails.maxTenure;
        var processingFeesValue = data.response.offerDetails.processingFee;

        if( data.response.offerDetails.interestRate ){
            $('#interestRate').show();
            document.getElementById("interestRateValue").textContent=data.response.offerDetails.interestRate;
        }

        if( maxOfferAmt ){

            $('#maximumAmountOffer').show();
            document.getElementById("maximumAmountOfferValue").textContent=maxOfferAmt;
            console.log(maxOfferAmt);
        }

        if( maxTenure ){

            $('#maximumTenure').show();
            document.getElementById("maximumTenureValue").textContent=maxTenure;
            console.log(maxTenure);
        }

        if( data.response.offerDetails.processingFee ){

            $('#processingFee').show();
            document.getElementById("processingFeeValue").textContent=data.response.offerDetails.processingFee;
            console.log(processingFeesValue);
        }


    }

</script>
	<!DOCTYPE html>
	<html>

	<head>
	@include('borrower.layout.head')
	</head>


	<style>

	ul {
	list-style: none;
	padding: 0
	}

	#widget{
	display: none;
	}
	#widget .wid_right>li {
	font-size: 15px;
	}

	#widget .wid_right>li:last-child {
	text-transform: uppercase
	}

	#widget .wid_right>li:last-child p {
	color: #d11c26;
	margin-bottom: 0
	}

	#widget .wid_right>li p.smtxt {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	text-transform: capitalize;
	color: #212529;
	}

	#widget .wid_right>li p {
	display: block;
	margin-bottom: 28px;
	font-size: 21px;
	font-weight: 700;
	color: #4a4a4a
	}

	#widget .wid_right>li p i {
	font-size: 0.8em
	}

	#widget .ui-widget.ui-widget-content {
	background: #b9b9b9;
	border: none;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	height: 3px;
	margin-top: 14px;
	}

	#widget .ui-widget-header {
	background: #d11c26;
	/* height: 3px; */
	}

	#widget .ui-slider .ui-slider-handle {
	width: 12px;
	height: 12px;
	cursor: pointer;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 40px;
	background: #e31e24;
	border: none;
	top: -5px;
	outline: none;
	}
	input {
	margin-bottom: 15px;
	}

	#otpDiv {
	display: none;
	}

	#loan-form {
	display: none;
	}

	#test2 {
	display: none;
	}
	#snackbar {
	visibility: hidden;
	min-width: 250px;
	margin-left: -125px;
	background-color: #1796d4;
	color: #fff;
	text-align: center;
	border-radius: 2px;
	padding: 16px;
	position: fixed;
	z-index: 1;
	left: 50%;
	bottom: 30px;
	font-size: 17px;
	}

	#snackbar.show {
	visibility: visible;
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
	}

	@-webkit-keyframes fadein {
	from {
	bottom: 0;
	opacity: 0;
	}

	to {
	bottom: 30px;
	opacity: 1;
	}
	}

	@keyframes fadein {
	from {
	bottom: 0;
	opacity: 0;
	}

	to {
	bottom: 30px;
	opacity: 1;
	}
	}

	@-webkit-keyframes fadeout {
	from {
	bottom: 30px;
	opacity: 1;
	}

	to {
	bottom: 0;
	opacity: 0;
	}
	}

	@keyframes fadeout {
	from {
	bottom: 30px;
	opacity: 1;
	}

	to {
	bottom: 0;
	opacity: 0;
	}
	}

	#snackbar3 {
	visibility: hidden;
	min-width: 250px;
	margin-left: -125px;
	background-color: #1796d4;
	color: #fff;
	text-align: center;
	border-radius: 2px;
	padding: 16px;
	position: fixed;
	z-index: 1;
	left: 50%;
	bottom: 30px;
	font-size: 17px;
	}

	#snackbar3.show3 {
	visibility: visible;
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
	}

	@-webkit-keyframes fadein {
	from {
	bottom: 0;
	opacity: 0;
	}

	to {
	bottom: 30px;
	opacity: 1;
	}
	}

	@keyframes fadein {
	from {
	bottom: 0;
	opacity: 0;
	}

	to {
	bottom: 30px;
	opacity: 1;
	}
	}

	@-webkit-keyframes fadeout {
	from {
	bottom: 30px;
	opacity: 1;
	}

	to {
	bottom: 0;
	opacity: 0;
	}
	}

	@keyframes fadeout {
	from {
	bottom: 30px;
	opacity: 1;
	}

	to {
	bottom: 0;
	opacity: 0;
	}
	}

	#snackbar2 {
	visibility: hidden;
	min-width: 250px;
	margin-left: -125px;
	background-color: #1796d4;
	color: #fff;
	text-align: center;
	border-radius: 2px;
	padding: 16px;
	position: fixed;
	z-index: 1;
	left: 50%;
	bottom: 30px;
	font-size: 17px;
	}

	#snackbar2.show2 {
	visibility: visible;
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
	}

	@-webkit-keyframes fadein {
	from {
	bottom: 0;
	opacity: 0;
	}

	to {
	bottom: 30px;
	opacity: 1;
	}
	}

	@keyframes fadein {
	from {
	bottom: 0;
	opacity: 0;
	}

	to {
	bottom: 30px;
	opacity: 1;
	}
	}

	@-webkit-keyframes fadeout {
	from {
	bottom: 30px;
	opacity: 1;
	}

	to {
	bottom: 0;
	opacity: 0;
	}
	}

	@keyframes fadeout {
	from {
	bottom: 30px;
	opacity: 1;
	}

	to {
	bottom: 0;
	opacity: 0;
	}
	}
	</style>

	<body>
	<div id="wrapper">
	@include('borrower.layout.navigation')
	<div id="page-wrapper" class="gray-bg">
	@include('borrower.layout.user_check')
	<div class="col-sm-12">
	@if(\Session::has('alert'))
	<div class="alert alert-success">
	{{\Session::get('alert')}}
	</div>
	@endif
	</div>
	<body>
	<div class="wrapper wrapper-content animated fadeIn">
	<div class="row">
	<div class="col-lg-12">
	<div class="ibox float-e-margins">
	<div class="ibox-title">
	<h5>Offer Check Form</h5>
	<div class="ibox-tools">
	</div>
	</div>
	<div class="ibox-content table-responsive">
	<form method="POST" action="{{ route('borrower.icici.instaOd.postOfferCheck') }}">
	{{ csrf_field()}}
	<div class="row">
	<div class="col-md-6">
	<label class="form-label">Mobile Number</label>
	<input name="mobileNumber" class="form-control" type="text" pattern="[1-9]{1}[0-9]{9}" maxlength="10" placeholder="Enter Mobile No." id="mobileNumber" oninput="sendOtp()" required>
	</div>
	<div id="snackbar">OTP has been sent on your mobile number.</div>
	<div id="otpDiv" class="col-md-6">
	<label class="form-label">OTP</label>
	<input name="otp" id="otp" class="form-control" type="text" onchange="sendRequest()" >
	</div>
	<input name="urn" name="id" value="{{ isset($data['urn']) ? $data['urn'] : ''}}" type="hidden">
	<input name="transactionIdentifier" id="transactionIdentifier"
	value="{{ isset($data['transactionIdentifier']) ? $data['transactionIdentifier'] : ''}}" type="hidden">
	</div>
	</form>
	</div>
	</div>
	</div>
	</div>

	<div id="widget" class="row">
	<div class="col-lg-12">
	<div class="ibox float-e-margins">
	<div class="ibox-title">
	<h5>Offer Details</h5>
	<div class="ibox-tools">
	</div>
	</div>
	<div class="ibox-content table-responsive">
	<ul class="wid_right">

	<li id="interestRate" style='display:none'>Interest Rate
	<p>
	<i></i>
	<span id="interestRateValue"></span>
	</p>
	</li>
	<li id="maximumAmountOffer" style='display:none'>Maximum Amount Offer
	<p>
	<i class="fa fa-rupee"></i>
	<span id="maximumAmountOfferValue"></span>
	</p>
	</li>
	<li id="maximumTenure" style='display:none'>Maximum Tenure
	<p>
	<span id="maximumTenureValue"></span>
	</p>
	</li>

	<li id="processingFee" style='display:none'>Processing Fee
	<p>
	<span id="processingFeeValue"></span>
	</p>
	</li>

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

	<div class="row" style="display: flex; justify-content: center;">

	<button onclick="location.href='{{ route('borrower.icici.instaOd.getBankStatement') }}'"
	type="button" class="btn btn-primary">
	Next, Upload Bank Statement</button>

	</div>

	</div>
	</body>
	</div>
	</div>
	</body>
	</html>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">
	document.getElementById('mobileNumber').addEventListener('input', function(e) {
	e.target.value = e.target.value.replace(/[^\dA-Z]/g, '');
	});

	var mobileNumber;

	var result;

	function sendOtp() {
	mobileNumber = document.getElementById('mobileNumber').value;

	if (mobileNumber.length == 10) {

	$.ajaxSetup({
	headers: {
	'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	}
	});

	$.ajax({
	type: "POST",
	data: {
	"mobileNumber": mobileNumber,
	},
	url: "{{ route('borrower.icici.instaOd.postOfferCheck') }}",
	success: function(data) {
	console.log(data);
	}
	});

	$('#otpDiv').show();

	}

	}

	function sendRequest() {



	var otp = document.getElementsByName('otp')[0].value;

	if (otp.length == 6 && mobileNumber.length == 10) {
	console.log(otp);
	$.ajaxSetup({
	headers: {
	'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	}
	});

	$.ajax({
	type: "POST",
	data: {
	"mobileNumber": mobileNumber,
	"otp": otp,
	},
	url: "{{ route('borrower.icici.instaOd.postOfferCheck') }}",
	success: function (data) {

	populateOfferCheck( data );
	}
	});

	}
	}

	function populateOfferCheck(data){

	$('#widget').show();

	var maxOfferAmt = data.response.offerDetails.maxOfferAmt;
	var maxTenure = data.response.offerDetails.maxTenure;
	var processingFeesValue = data.response.offerDetails.processingFee;

	if( data.response.offerDetails.interestRate ){
	$('#interestRate').show();
	document.getElementById("interestRateValue").textContent=data.response.offerDetails.interestRate;
	}

	if( maxOfferAmt ){

	$('#maximumAmountOffer').show();
	document.getElementById("maximumAmountOfferValue").textContent=maxOfferAmt;
	console.log(maxOfferAmt);
	}

	if( maxTenure ){

	$('#maximumTenure').show();
	document.getElementById("maximumTenureValue").textContent=maxTenure;
	console.log(maxTenure);
	}

	if( data.response.offerDetails.processingFee ){

	$('#processingFee').show();
	document.getElementById("processingFeeValue").textContent=data.response.offerDetails.processingFee;
	console.log(processingFeesValue);
	}


	}

	</script>