@extends('layouts.app1')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
@section('content')

<!-- page content -->
<div class="right_col" role="main">
	@include('flashmessage')
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>BBPS Recharge</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_title">
                    <h2><i class="fa fa-bars"></i>BBPS Recharge</h2>
                    
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">

                    <!-- <ul class="nav nav-tabs bar_tabs" id="myTab" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#tab9" role="tab" aria-controls="tab9" aria-selected="true">
                        <i class="fa fa-mobile fa-2x"></i> Prepaid</a>
                      </li>                      
                      <li class="nav-item">
                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#tab12" role="tab" aria-controls="tab12" aria-selected="false">
                        <i class="fa fa-table"></i> Data Card</a>
                      </li>                      
                    </ul> -->
                    <div class="tab-content" id="myTabContent">
                      <div class="tab-pane fade show active" id="tab9" role="tabpanel" aria-labelledby="home-tab">
                        <form action="/bbps/store" method="POST" name="pre" id="pre" class="mt-5"> 
                        @csrf
                                    <div class="row">
                                        <input type="hidden" name="key" value="{{Crypt::encrypt('Mobile')}}">
                                        <div class="col-md-3">
                                            <div class="form-group required">
                                                <label for="" class="control-label">Services</label>
                                                <select name="services" id="services" class="form-control select2">
                                                    <option>Select Services</option>                    
                                                    @foreach ($rechargeServices as $serviceList)
                                                        <option value="{{ $serviceList->service }}">
                                                          {{ $serviceList->service }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group required">
                                                <label for="" class="control-label">Operator</label>
                                                <select name="operator" id="operator" class="form-control select3">
                                                    <option>Select Operator</option>                  
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group required">
                                                <label for="" class="control-label">Circle</label>
                                                <select name="circle" id="circle" class="form-control select4">
                                                    <option>Select Circle</option>
                                                    @foreach ($circles as $list)
                                                        <option value="{{ $list->code }}">{{ $list->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>                                        
                                        <div class="col-md-2">
                                            <div class="form-group required">
                                                <br>
                                                <!-- <button class="btn btn-success btn-xs mt-2 btn-block" type="submit">Show</button> -->
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row"> 
                                      <div class="col-md-3">
                                        <div class="form-group">
                                          <label for="">Service Number</label>
                                          <input placeholder="" name="service_number" id="service_number" class="form-control">
                                        </div>
                                      </div> 
                                      <div class="col-md-3">
                                        <div class="form-group required">
                                          <label for="" class="control-label">Amount</label>
                                          <input type="number" name="amount" id="amount" class="form-control">
                                        </div>
                                      </div>
                                      <div class="col-md-3">
                                        <div class="form-group required">
                                          <label for="" class="control-label">TPIN</label>
                                          <input type="password" name="tpin" id="tpin" class="form-control">
                                        </div>
                                      </div>
                                      <div class="col-md-2">
                                        <div class="form-group required">
                                          <br>
                                          <button class="btn btn-success btn-xs mt-2 btn-block" type="submit">Recharge</button>
                                        </div>
                                      </div>
                                    </div>
                                </form>
                      </div>   
                                       
                    </div>
                        <div class="row" id="set_plan">
                                                       
                        </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="clearfix"></div>    
          </div>
          <div class="clearfix"></div>
        </div>
        <!-- /page content -->
<script type="text/javascript">
    jQuery(document).ready(function ()
    {
            jQuery('select[name="services"]').on('change',function(){
               var serviceName = jQuery(this).val();
               // console.log(serviceName);
               if(serviceName)
               {
                  jQuery.ajax({
                     url : '/getOperator/'+serviceName,
                     type : "GET",
                     dataType : "json",
                     success:function(data)
                     {
                        // console.log(data);
                        jQuery('#operator').empty();
                        jQuery.each(data, function(key,value){                           
                           $('#operator').append('<option value="'+key+'">'+value+'</option>');
                        });
                     }
                  });
               }
               else
               {
                  $('#operator').empty();
               }
            });
    });
    </script>
    <style type="text/css">
    	/* Chrome, Safari, Edge, Opera */
		input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button {
		  -webkit-appearance: none;
		  margin: 0;
		}

		/* Firefox */
		input[type=number] {
		  -moz-appearance: textfield;
		}
    </style>
@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();
    $('.select3').select2();
    $('.select4').select2();
});
</script>
@endsection