@extends('adminlayout.mobile_sidebar')

@section('content')

<style>
    .cursor {
        cursor: pointer;
    }

    .mainTop{
	ackground-color: rgb(239, 239, 239);
    background-size: cover;
    display: flex;
    justify-content: center;
}
.maxWidth {
    max-width: 450px;
}
.mainRoot{
	display: flex;
    flex-direction: column;
    background: #fff;
    width: 100%;
    min-width: 320px;
	min-height: 100%!important;
	padding-bottom: 15px;
}
.sticky-top {
    z-index: 1111 !important;
}
.headerNav {
	background: #fff;
    opacity: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
	padding: 0.8rem 0.6rem !important;
}
.boxShadow {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)!important;
}
.navLeftText {
    color: #111111;
}
.innerHeadText{
	font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    width: 86%;
    vertical-align: middle;
}
.backIcon {
    margin-right: 15px;
}
.backIcon img{
	width: 21px;
}
.m-t-10{
	margin-top: 10px;
}
.mobDtable .table th, .mobDtable .table td {
    padding: 0.5rem;
    vertical-align: middle;
    font-size: 14px;
    color: #111111;
}

</style>

 <div class="nk-content-body">
	<div class="mainTop">
	<div class="mainRoot maxWidth">
		<div class="navTop sticky-top">
			<nav id="" class="navbar navbar-expand-lg headerNav boxShadow">
				<div class="navLeftText">
					<a class="backIcon" href="{{ url()->previous() }}"><span><img src="{{url('/assets/images/mob-dash/back-arrow.png')}}"></span></a> <span class="innerHeadText">{{ $data->name }}</span>
				</div>
				
			</nav>
		</div>
		<div class="container">
            <div class="nk-block-head nk-block-head-sm m-t-10">
                <div class="nk-block-between">
                    <div class="nk-block-head-content">
                       
                        <div class="nk-block-des text-danger">
                            <!-- <p>You have total 1 comingsoon.</p> -->
                            @if($errors->any())
                            {!! implode('', $errors->all('<p>:message</p>')) !!}
                            @endif
                        </div>
                    </div><!-- .nk-block-head-content -->
                    <div class="nk-block-head-content">
                        <img src="assets/images/bbps/BharatBillPay.png" style="max-width: 120px;" alt="">
                    </div>
                </div><!-- .nk-block-between -->
            </div><!-- .nk-block-head -->

       

    <div class="row mt-1">

        <div class="col-md-12">
            <form action="{{ route('billpayreq') }}" method="post">
                @csrf
                <div class="form-row form-group">
                    <div class="col-md-4">
                        <div class="card bg-success-dim p-1 m-1 border border-success">
                            <label for="exampleInputEmail1">Operator List</label>
                            <input type="hidden" name="operator" id="operator" value="" class="form-control"/>
                               
							 <div class="autocomplete">
								<input id="billinfosearch" type="text" class="form-control" placeholder="Type minmum 3 charcter" onKeyUp="getBill(this.value)">
								<div id="myInputautocomplete-list" class="autocomplete-items" >
								@foreach($billinfos as $info)
								<div onClick="setBillinfo({{$info->id}}, '{{$info->billerName}}')"><a href="javascript:void(0)">{{$info->billerName}}</a></div>
								@endforeach
								</div>
							  </div>
                        </div>
                    </div>
                </div>
				  		
				<div class="row" id="formallfield">

                </div>
                <br><br>
                <div class="form-row">
                    <button type="submit" class="btn btn-primary" id="fetchBillButton" style="display:none;">Fetch Bill</button>
                </div>

            </form>
        </div>

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

.autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
   max-height: 300px;
  overflow-y: scroll;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
function getBill(name)
{
	
	if(name.length>2)
	{
	 var url = "{{ url('admin/get-bbps-category-payment'.'/'.$data->name) }}"+'/'+name;
            $.ajax({
                url: url,               
                type: "GET",               
                context: this,
                success: function(response) {
					  var response = JSON.parse(response);
					  var bbpsbillinfo = response.data;
					  var optionhtml = '';
					  if(bbpsbillinfo.length)
					  {
						  bbpsbillinfo.forEach((data, index)=> {
								optionhtml += '<div onClick="setBillinfo('+data.id+', \''+data.billerName+'\')"><a href="javascript:void(0)">'+data.billerName+'</a></div>';
							});
						  
					  }else{
						  optionhtml = '<div>No record found</div>';
					  }
					  $('#myInputautocomplete-list').show();
					  $('#myInputautocomplete-list').html(optionhtml);
				  
				}
		  });	
	}else{
		$('#myInputautocomplete-list').hide();
	}
}
function setBillinfo(id, name)
{
	$('#billinfosearch').val(name);
	$('#operator').val(id);
	getOprator(id)
	$('#myInputautocomplete-list').hide();
	$('#fetchBillButton').show();
}
  
  
        // alert('Document is ready');

       function getOprator(operator)
	   {
            // alert('keyup');
            jQuery('#formallfield').html('');
          //  var operator = $("#operator").val();
            var url = "{{ route('getBbpsParamInfo') }}";
            $.ajax({
                url: url,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                data: {
                    'operator': operator
                },
                context: this,
                success: function(response) {
                    var response = JSON.parse(response);
                    console.log(response);
                    var html = '';
                    var amountStatus = 0;
                    $.each(response.data, function(k, v) {
                        if (v.paramName == "Amount") {
                            amountStatus = 1;
                        }
                        var Optional = '';
                        var Required = '';
                        if (v.isOptional == 'false') {
                            Optional = '<b class="text-danger">*</b>';
                            Required = 'Required';
                        }
                        html += `<div class="col-md-4">
                                    <div class="card bg-success-dim p-1 m-1 border border-success">
                                        <label for="` + v.paramName + `">` + v.paramName + `  ` + Optional + `</label>
                                        <input type="text" name="` + v.paramName + `" min="` + v.minLength + `" max="` + v.maxLength + `" id="` + v.paramName + `" ` + Required + ` class="form-control">
                                    </div>
                                </div>`;
                        // if (v.dataType == 'ALPHANUMERIC') {
                        //     html += `<div class="col-md-4">
                        //                 <label for="` + v.paramName + `">` + v.paramName + `  ` + Optional + `</label>
                        //                 <input type="text" name="` + v.paramName + `" min="` + v.minLength + `" max="` + v.maxLength + `" id="` + v.paramName + `" ` + Required + ` class="form-control">
                        //             </div>`;
                        // } else {
                        //     html += `<div class="col-md-4">
                        //                 <label for="` + v.paramName + `">` + v.paramName + `  ` + Optional + `</label>
                        //                 <input type="number" name="` + v.paramName + `" min="` + v.minLength + `" max="` + v.maxLength + `" id="` + v.paramName + `" ` + Required + ` class="form-control">
                        //             </div>`;
                        // }
                    });

                    if (response.Billinfo.billerFetchRequiremet == "NOT_SUPPORTED") {
                        var option = '';
                        $.each(response.paymentMode, function(key, val){
                            option += `<option value="`+val+`">`+val+`</option>`;
                        });
						 option = `<option value="Cash">Cash</option>`;
                        html += `<div class="col-md-4">
                                    <div class="card bg-success-dim p-1 m-1 border border-success">
                                        <label for="paymentMode">Select Payment Mode <b class="text-danger">*</b></label>
                                        <select name="paymentMode" id="paymentMode" class="form-control" required>
                                            <option value="">Select Payment Mode</option>
                                            `+option+`
                                        </select>
                                    </div>
                                </div>`;
                        if (amountStatus == 0) {
                            html += `<div class="col-md-4">
                                        <div class="card bg-success-dim p-1 m-1 border border-success">
                                            <label for="amount">Amount <b class="text-danger">*</b></label>
                                            <input type="text" name="amount" id="amount" Required class="form-control">
                                        </div>
                                    </div>`;
                        }
                        html += `<div class="col-md-4">
                                    <div class="card bg-success-dim p-1 m-1 border border-success">
                                        <label for="custConvFee">Customer Convenience Fees</label>
                                        <input type="text" name="custConvFee" value="0" id="custConvFee" class="form-control" required>
                                    </div>
                                </div>`;
                        $('#fetchBillButton').html('Quick Pay');
                    } else {
                        $('#fetchBillButton').html('Fetch Bill');
                    }
                    jQuery('#formallfield').html(html);
                },
                error: function(error) {
                    console.log(error.responseText);
                }
            });
		}
 
</script>



@endsection