@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>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> 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="/crecharge" method="POST" name="pre" id="pre" class="mt-5"> 
                                    <div class="row">
                                        @csrf
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="">Prepaid Mobile Number</label>
                                                <input placeholder="" name="mobile_number" maxlength="10" minlength="10"
                                                    id="mobile_number" class="form-control">
                                            </div>
                                        </div>
                                        <input type="hidden" name="key" value="{{Crypt::encrypt('Mobile')}}">
                                        <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 select4">
                                                    <option>Select Operator</option>
                                                    @foreach ($prepaid as $pre)
                                                        <option value="{{$pre->code}}">{{$pre->name}}</option>
                                                    @endforeach

                                                </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 select5">
                                                    <option>Select Circle</option>
                                                    @foreach ($regions as $region)
                                                        <option value="{{$region->code}}">{{$region->name}}</option>
                                                    @endforeach
                                                </select>
                                            </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-1">
                                            <div class="form-group required">
                                                <br>
                                                <button class="btn btn-success btn-xs mt-2" type="submit">Recharge</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                      </div>   
                      <div class="tab-pane fade" id="tab12" role="tabpanel" aria-labelledby="contact-tab">
                        <form action="/crecharge" method="POST" id="DTH" name="DTH" class="mt-5">
                                    <div class="row">
                                        @csrf
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="">Customer No.</label>
                                                <input name="mobile_number" id="mobile_number" class="form-control">
                                            </div>
                                        </div>
                                        <input type="hidden" name="key" value="{{Crypt::encrypt('DTH')}}">

                                        <div class="col-md-3">
                                            <div class="form-group required">
                                                <label for="" class="control-label">Operator</label>
                                                <select name="operator" id="operator2" class="form-control select2">
                                                    <option>Select Operator</option>
                                                    @foreach ($dth as $dt)
                                                        <option value="{{$dt->code}}">{{$dt->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group required">
                                                <label for="" class="control-label">Circle</label>
                                                <select name="circle" id="circle2" class="form-control select3">
                                                    <option>Select Circle</option>
                                                    @foreach ($regions as $region)
                                                        <option value="{{$region->code}}">{{$region->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group required">
                                                <label for="" class="control-label">Amount</label>
                                                <input 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 name="tpin" id="tpin" class="form-control">
                                            </div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="form-group required">
                                                <br>
                                                <button class="btn btn-success btn-xs mt-2" 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="operator"]').on('change',function(){
               var operatorType = jQuery(this).val();
               // console.log(operatorType);
			   if(operatorType=="IV" || operatorType=="VI" || operatorType=="V" || operatorType=="I"){
				   operatorType = "V";
			   }
               if(operatorType)
               {
                  jQuery.ajax({
                     url : '/get_plans/'+operatorType,
                     type : "GET",
                     dataType : "json",
                     success:function(data)
                     {
                        // console.log(data);
                        jQuery('#set_plan').empty();
                        jQuery.each(data, function(key,value){                           
                           $('#set_plan').append('<div class="card col-md-3 col-sm-3 col-12"><div class="card-body"><h5 class="card-title">Rs.'+key+'</h5><p class="card-text">'+value+'</p></div></div>');
                        });
                     }
                  });
               }
               else
               {
                  $('#set_plan').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;
      }
      .select2{width: 100%!important;}
      .select3{width: 100%!important;}
    </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();
    $('.select5').select2();
});
</script>
@endsection