@extends('layouts.app1')

@section('content')

<!-- page content -->
<div class="right_col" role="main">
          <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 class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                      <button class="btn btn-secondary" type="button">Go!</button>
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div class="clearfix"></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>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Settings 1</a>
                            <a class="dropdown-item" href="#">Settings 2</a>
                          </div>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <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="profile-tab" data-toggle="tab" href="#tab10" role="tab" aria-controls="tab10" aria-selected="false">
                        <i class="fa fa-list"></i> Postpaid</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#tab11" role="tab" aria-controls="tab11" aria-selected="false">
                        <i class="fa fa-space-shuttle"></i> DTH</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>
                      <li class="nav-item">
                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#tab13" role="tab" aria-controls="tab13" aria-selected="false">
                        <i class="fa fa-phone"></i> Lanline</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="/recharge" method="POST" name="prepaid" id="prepaid" 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" id="mobile_number"
                                                    class="form-control">
                                            </div>
                                        </div>
                                        <input type="hidden" name="key" value="{{Crypt::encryptString('TALKTIME')}}">
                                        <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"></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-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="tab10" role="tabpanel" aria-labelledby="profile-tab">
                        <form id="postpaid" name="postpaid" action="/recharge" method="POST" class="mt-5">
                                    <div class="row">
                                        @csrf

                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="">Postpaid Mobile Number</label>
                                                <input name="mobile_number" id="mobile_number" class="form-control">
                                            </div>
                                        </div>
                                        <input type="hidden" name="key" value="{{Crypt::encryptString('POSTPAID')}}">

                                        <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"></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-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="tab11" role="tabpanel" aria-labelledby="contact-tab">
                        <form action="/recharge" method="POST" name="dth" id="dth" class="mt-5">
                                    <div class="row">
                                        @csrf

                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="">Registered Mobile Number</label>
                                                <input name="mobile_number" id="mobile_number" class="form-control">
                                            </div>
                                        </div>
                                        <input type="hidden" name="key" value="{{Crypt::encryptString('DTH')}}">

                                        <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"></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-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="/recharge" method="POST" id="datacard" name="datacard" class="mt-5">
                                    <div class="row">
                                        @csrf

                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="">Registered Mobile Number</label>
                                                <input name="mobile_number" id="mobile_number" class="form-control">
                                            </div>
                                        </div>
                                        <input type="hidden" name="key"
                                            value="{{Crypt::encryptString('DATACARDPREPAID')}}">

                                        <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"></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-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="tab13" role="tabpanel" aria-labelledby="contact-tab">
                        <form action="/recharge" method="POST" id="landline" name="landline" class="mt-5">
                                    <div class="row">
                                        @csrf

                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="">LandLine Number</label>
                                                <input name="mobile_number" maxlength="10" id="mobile_number"
                                                    class="form-control">
                                            </div>
                                        </div>
                                        <input type="hidden" name="key" value="{{Crypt::encryptString('LANDLINE')}}">

                                        <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"></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-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>
                </div>
              </div>
            </div>
            <div class="clearfix"></div>    
          </div>
          <div class="clearfix"></div>
        </div>
        <!-- /page content -->

@endsection