@extends('layouts.app1')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
@section('content')
<style>
	.bbps-icons{
		border-radius: 50px;
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 20px !important;
	}
	.bbps-icons:hover{
		box-shadow: 1px 1px 20px #cee6ff;
		cursor: pointer;
	}
	.bbps-icons img{
		margin-bottom:15px;
	}
	.select2{
		width:100% !important;
	}
</style>
<!-- page content -->
<div class="right_col" role="main">
	@include('flashmessage')
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>BBPS</h3>
              </div>

              <div class="title_right">
                <div class="col-md-5 col-sm-5   form-group pull-right top_search">
                  
                </div>
              </div>
            </div>
			
            <div class="clearfix"></div>
			 <div class="panel-body">
				
            </div>
            <div class="">
              <div class="col-md-12 col-sm-12  ">
                <div class="x_panel">

                  <div class="x_content">

                    <div class="tab-content row justify-content-center text-center" id="myTabContent">
                     @foreach($servcies as $servcie)
					 @php
						$opt = str_replace(' ','-',strtolower($servcie));
					@endphp
						<div  onclick="bbpsService('{{$opt}}','{{$servcie}}')" id="serve{{$opt}}" class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="{{$servcie}}">
							<a href="javascript:void(0)" >
							<img src="{{url('system/public/uploads/bbps')}}/{{$opt}}.png" /><br/>
								{{$servcie}}
							</a>
						</div>
					@endforeach	
					
					<input type="hidden" id="operators" value="{{ json_encode($operators) }}" />
					<!--	<div class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="Gas"><img src="{{url('system/public/uploads/bbps')}}/gas.png" /><br/>Gas</div>
						<div class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="Broadband"><img src="{{url('system/public/uploads/bbps')}}/broadband.png" /><br/>Broadband</div>
						<div class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="Electricity"><img src="{{url('system/public/uploads/bbps')}}/electricity.png" /><br/>Electricity</div>
						<div class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="Insurance"><img src="{{url('system/public/uploads/bbps')}}/insurance.png" /><br/>Insurance</div>
						<div class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="Water"><img src="{{url('system/public/uploads/bbps')}}/electricity.png" /><br/>Water</div>
						<div class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="Fastag"><img src="{{url('system/public/uploads/bbps')}}/fastag.png" /><br/>Fastag</div>
						<div class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="Postpaid"><img src="{{url('system/public/uploads/bbps')}}/postpaid.png" /><br/>Postpaid</div>
						<div class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="Landline"><img src="{{url('system/public/uploads/bbps')}}/landline.png" /><br/>Landline</div>
						<div class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="Traffic Challan"><img src="{{url('system/public/uploads/bbps')}}/traffic-challan.png" /><br/>Traffic Challan</div>
						<div class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="Cable"><img src="{{url('system/public/uploads/bbps')}}/cable.png" /><br/>Cable</div>
						<div class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="Hospital"><img src="{{url('system/public/uploads/bbps')}}/hospital.png" /><br/>Hospital</div>
						<div class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="LPG"><img src="{{url('system/public/uploads/bbps')}}/lpg.png" /><br/>LPG</div>
						<div class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="Municipality"><img src="{{url('system/public/uploads/bbps')}}/municipality.png" /><br/>Municipality</div>
						<div class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="Digital Voucher"><img src="{{url('system/public/uploads/bbps')}}/digital-voucher.png" /><br/>Digital Voucher</div>
						<div class="col-sm-2 border border-primary m-2 p-3 bbps-icons" data-id="Datacard Prepaid"><img src="{{url('system/public/uploads/bbps')}}/datacard-prepaid.png" /><br/>Datacard Prepaid</div>  
						-->
                    </div>

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

            <div class="clearfix"></div>    
          </div>
          <div class="clearfix"></div>
        </div>
        <!-- /page content -->
		<div id="myModal" class="modal fade" role="dialog">
		  <div class="modal-dialog">
			<input type="hidden" id="operatorJson" value="" />
			<!-- Modal content-->
			<div class="modal-content">
			  <div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title text-center" id="modal-title">
				</h4>
			  </div>
			  <div id="otpBox">
			  <div class="modal-body">
				<div class="text-center">
					<img src="{{url('system/public/uploads')}}/loading.gif" id="loading" style="display:inline-block"/>
				</div>
				<div id="formBlock" class="row"  style="display:none">
					  <div class="form-group col-md-12">
						<label for="pwd">Select Operator:</label>
						<select class="form-control select2" onchange="getInputFields(this.value)" id="operatorList">
							<option>Select Operator</option>
						</select>
					  </div>
					  <div id="inputField">
						  <div class="form-group col-md-6">
							<label for="email">Email address:</label>
							<input type="email" class="form-control" pattern="[0-9]{12}" id="email">
						  </div>
						  <div class="form-group col-md-6">
							<label for="email">Email address:</label>
							<input type="email" class="form-control" pattern="[0-9]{12}" id="email">
						  </div>
					  </div>
				</div>
				<div id="billDetails" class="row justify-content-center"  style="display:none">
				</div>
			  </div>
			  <div class="modal-footer justify-content-center" style="clear: both;">
				<button type="button" class="btn btn-primary mr-auto" data-dismiss="modal">Close</button>
			  </div>
			  </div>
			</div>

		  </div>
		</div>
@endsection
@section('footerscript')
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    $('.select2').select2();
	@if(isset($_GET['service']))
		$("#serve{{$_GET['service']}}").trigger("click");
	@endif
});
</script>
<script>
function bbpsService(servcie,category){
	$("#operatorJson").val('');
	$("#inputField").html('');
	$("#billDetails").html('');
	$("#formBlock").css("display","none");
	$("#loading").css("display","inline-block");
	$('#myModal').modal({
		backdrop: 'static',
		show: true,
		keyboard: false  // to prevent closing with Esc button (if you want this too)
	});	
	$('#modal-title').text(category);
	var opData = $('#operators').val();
	$.ajax({
		type: "POST",
		url: "/bbps/" + servcie,
		data: {
		  category: category,
		  operators: opData,
		},
		headers: {
		  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		},
		success: function success(response) {
		  if (response != undefined) {
			if (response.statusCode == 200) {
				$("#operatorJson").val(JSON.stringify(response.operators));
				$("#formBlock").css("display","block");
				$("#loading").css("display","none");
				var $select = $('#operatorList'); 
				$select.find('option').remove();
				$select.append('<option value="" selected disabled>Select Operator</option>');				
				$.each(response.operators,function(key, value) 
				{
					$select.append('<option value=' + key + '>' + value.name + '</option>');
				});
			}
		  }
		}
	  });
}
function getInputFields(val){
	if(val!=""){
	  $("#inputField").html('');
	  var operatorJson = $("#operatorJson").val();
	  $.ajax({
		type: "POST",
		url: "/bbps/operatorDetails/" + val,
		data: {
		  categoryId: val,
		  operatorJson: operatorJson,
		},
		headers: {
		  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		},
		success: function success(response) {
		  if (response != undefined) {
			if (response.statusCode == 200) {
				
				var html = "";				
				if(response.operator.ad1_name != null){
					html += '<div class="form-group col-md-5">' +
							'<label for="email">' + response.operator.ad1_d_name + ':</label>' +
							'<input type="text" class="form-control"  id="ad1_d_name">' +
							'<input type="hidden" class="form-control" id="ad1_name" value="' + response.operator.ad1_name + '">' +
						  '</div>';
				}
					html += '<div class="form-group col-md-5">' +
							'<label id="displayname">' + response.operator.displayname + ':</label>' +
							'<input type="text" class="form-control"  id="canumber">' +
						  '</div>';
					html += '<div class="form-group col-md-2">' +
							'<label for="email" style="opacity:0">bbb</label>' +
							'<button class="form-control btn btn-success"  onclick=\'fetchBill()\'>Fetch Bill</button>' +
						  '</div>';
				$("#inputField").html(html);
			}
		  }
		}
	  });
	}
}
function fetchBill(){
	var operator = $('#operatorList').val();
	var operatorName = $('#operatorList option:selected').text();
	var displayname = $('#displayname').text();
	var canumber = $('#canumber').val();
	var ad1_d_name = ad1_name = "";
	if($('#ad1_d_name').length ){
		var ad1_d_name = $('#ad1_d_name').val();
		var ad1_name = $('#ad1_name').val();
		if(ad1_d_name==''){
			alert("All fields are required");
			return false;
		}
	}
	if(operator=='' || canumber==''){
		alert("All fields are required");
		return false;
	}
	
	
	$("#formBlock").css("display","none");
	$("#loading").css("display","inline-block");
	
	 $.ajax({
		type: "POST",
		url: "/fetchBill",
		data: {
		  displayname: displayname,
		  operatorName: operatorName,
		  operator: operator,
		  canumber: canumber,
		  ad1_d_name: ad1_d_name,
		  ad1_name: ad1_name,
		},
		headers: {
		  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		},
		success: function success(response) {
		  if (response != undefined) {
			if (response.statusCode == 200) {
				$("#inputField").html('');
				var html = "<div class='col-md-8'><table class='table table-bordered'>";
				html += '<tr><th colspan="2" class="text-center">' + response.data.message + '</th></tr>';
				if(response.data.name != undefined){
					html += '<tr><th>Name</th><td class="text-right">' + response.data.name + '</td></tr>';
				}
				if(response.data.canumber != undefined){
					html += '<tr><th>' + response.data.displayname + '</th><td class="text-right">' + response.data.canumber + '</td></tr>';
				}
				if(response.data.operatorName != undefined){
					html += '<tr><th>Operator Name</th><td class="text-right">' + response.data.operatorName + '</td></tr>';
				}
				if(response.data.amount != undefined){
					html += '<tr><th>Amount</th><td class="text-right">' + response.data.amount + '</td></tr>';
				}
				if(response.data.duedate != undefined){
					html += '<tr><th>Due Date</th><td class="text-right">' + response.data.duedate + '</td></tr>';
				}
				html += '<tr><th colspan="2" class="text-center"><button class="btn btn-success" onclick="payBill()">Pay Now</button></th></tr>';
				html += '</table></div>';
				html += '<input value="' + response.data.operatorName + '" id="operatorName" type="hidden" />';
				html += '<input value="' + response.data.operator + '" id="operator" type="hidden" />';
				html += '<input value="' + response.data.amount + '" id="amount" type="hidden" />';
				html += '<input value="' + response.data.canumber + '" id="canumber" type="hidden" />';
				html += '<input value=\'' + JSON.stringify(response.data.bill_fetch) + '\' id="bill_fetch" type="hidden" />';
					/* html += '<div class="form-group col-md-5">' +
							'<label for="email">' + response.operator.displayname + ':</label>' +
							'<input type="text" class="form-control"  id="canumber">' +
						  '</div>';
					html += '<div class="form-group col-md-2">' +
							'<label for="email" style="opacity:0">bbb</label>' +
							'<button class="form-control btn btn-success"  onclick=\'fetchBill()\'>Fetch Bill</button>' +
						  '</div>'; */
				$("#billDetails").html(html);
				$("#billDetails").css("display","flex");
				$("#loading").css("display","none");
			} else {
				$("#inputField").html('');
				var html = "<div class='col-md-8'><table class='table table-bordered'>";
				html += '<tr><th colspan="2" class="text-center"><h2>' + response.data.message + '</h2></th></tr>';
				
				$("#billDetails").html(html);
				$("#billDetails").css("display","flex");
				$("#loading").css("display","none");
			}
		  }
		}
	  });
	//alert(operator);
}
function payBill(){
	
	var operatorName = $("#operatorName").val();
	var operatorCate = $('#modal-title').text();;
	var operator = $("#operator").val();
	var amount = $("#amount").val();
	var canumber = $("#canumber").val();
	var bill_fetch = $("#bill_fetch").val();
	
	$("#billDetails").css("display","none");
	$("#loading").css("display","inline-block");
	
	$.ajax({
		type: "POST",
		url: "/payBill",
		data: {
		  amount: amount,
		  operatorName: operatorName,
		  operatorCate: operatorCate,
		  operator: operator,
		  canumber: canumber,
		  bill_fetch: bill_fetch,
		},
		headers: {
		  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		},
		success: function success(response) {
		  if (response != undefined) {
			if (response.statusCode == 200) {
				$("#inputField").html('');
				var html = "<div class='col-md-8 text-center'>"+ response.data.message +"</div>";
				$("#billDetails").html(html);
				$("#billDetails").css("display","flex");
				$("#loading").css("display","none");
			} else {
				if (response.data != undefined) {					
					var html = "<div class='col-md-8 text-center'>"+ response.data.message +"</div>";
				} else {
					var html = "<div class='col-md-8 text-center'>"+ response.message +"</div>";
				}
				$("#inputField").html('');
				$("#billDetails").html(html);
				$("#billDetails").css("display","flex");
				$("#loading").css("display","none");
			}
		  }
		}
	  });
}
</script>
@endsection