<style>
   .button1 {
     display: inline-block;
     height: 35px;
     line-height: 35px;
     padding-right: 15px;
     padding-left: 50px;
     position: relative;
     background-color:rgb(41,127,184);
     color:rgb(255,255,255);
     text-decoration: none;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 15px;
     border: 0;
     
     
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        text-shadow:0px 1px 0px rgba(0,0,0,0.5);
      -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom:1;
      filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);

        -moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
        -webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
        box-shadow:0px 2px 2px rgba(0,0,0,0.2);
        -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
      filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);
   }

   .button1 span {
     position: absolute;
     left: 0;
     top: 0;
     width: 35px;
     background-color:rgba(0,0,0,0.5);
     
     -webkit-border-top-left-radius: 5px;
   -webkit-border-bottom-left-radius: 5px;
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-bottomleft: 5px;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
   border-right: 1px solid  rgba(0,0,0,0.15);
   }

   .button1:hover span, .button1.active span {
     background-color:rgb(0,102,26);
     border-right: 1px solid  rgba(0,0,0,0.3);
   }

   .button1:active {
     margin-top: 2px;
     margin-bottom: 13px;

     -moz-box-shadow:0px 1px 0px rgba(255,255,255,0.5);
   -webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.5);
   box-shadow:0px 1px 0px rgba(255,255,255,0.5);
   -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true)";
   filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true);
   }

   .button1.turquoise {
     background: #449d44;
   }

</style>
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-8">
        <!-- <h2 ng-click="editName()" ng-show="showCompany" style="cursor: pointer;">Tellus Institute</h2> -->
        <div style="margin-top: 20px;"><input type="text" style="width:50%;" placeholder="Enter Company Name" ng-model="user.companyName" class="form-control"></div>
    </div>
    <div class="col-lg-4" style="margin-top: 20px; text-align: right;">
        <button type="button" class="btn btn-default btn-sm" ui-sref="index.flightDept">Cancel</button>
        <button type="button" class="btn btn-primary btn-sm" ng-click="userData()">Save Changes</button>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-7">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="pull-left">
                        <h5>Contact Information</h5>
                    </div>
                    <div class="pull-right my-toggle-switch">
                        <div class="switch">
                            <div class="onoffswitch">
                                <input type="checkbox" ng-checked="status === true" ng-model="status" ng-init="status = true" class="onoffswitch-checkbox" id="example1">
                                <label class="onoffswitch-label" for="example1">
                                    <span class="onoffswitch-inner"></span>
                                    <span class="onoffswitch-switch"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <form role="form">
                            <div class="col-sm-6 b-r">
                                    <!-- <div class="form-group"><label>Company Name</label> <input type="text" placeholder="Company Name" ng-model="user.companyName" class="form-control"></div> -->
                                    <div class="form-group"><label>Email Username</label> <input type="email" placeholder="Email Username" ng-model="user.email" class="form-control"></div>
                                    <div class="form-group"><label>First Name</label> <input type="text" placeholder="First Name" ng-model="user.firstName" class="form-control"></div>
                                    <div class="form-group"><label>Last Name</label> <input type="text" placeholder="Last Name" ng-model="user.lastName" class="form-control"></div>
                                    <!-- <div>
                                        <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>Log in</strong></button>
                                        <label> <input type="checkbox" class="i-checks"> Remember me </label>
                                    </div> -->
                                
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group"><label>Password</label> <input type="password" ng-model="user.password" placeholder="Password" class="form-control"></div>
                                <div class="form-group"><label>Phone</label> <input type="number" ng-model="user.phone" placeholder="Phone" class="form-control"></div>
                                <div class="form-group"><label>Mobile</label> <input type="number" ng-model="user.mobile" placeholder="Mobile" class="form-control"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Client Notes</h5>
                    
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <form role="form">
                            <textarea class="form-control" rows="10" ng-model="user.clientNote" id="comment"></textarea>
                        </form>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>

<div>
  <div class="row">
      <div class="col-lg-7">
          <div class="ibox float-e-margins">
              <div class="ibox-title">
                <h5>Aircraft List</h5>
                <!-- <div class="pull-right">
                  <button type="button" class="btn btn-primary btn-sm" ng-click="openModal()">+ Add</button>
                </div>
                <div class="clearfix"></div>
                <div class="modal inmodal" id="myModal4" tabindex="-1" role="dialog"  aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content animated fadeIn">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title">Add Aircraft</h4>
                            </div>
                            <div class="modal-body" style="padding: 15px;">
                                <table class="table table-bordered table-hover table-striped">
                                  <thead>
                                    <tr>
                                      <th>Tail</th>
                                      <th>Make</th>
                                      <th>Model</th>
                                      <th>Size</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                    <tr>
                                      <td>
                                        <input type="text" style="width:100px;" ng-model="aircraft.tail" class="form-control">
                                      </td>
                                      <td style="width: 30%">
                                        <select class="form-control" ng-model="aircraft.make" ng-change="getModal()">
                                           <option ng-repeat="make in aircraftMakeList">{{make}}</option>
                                        </select>
                                      </td>
                                      <td style="width: 30%">
                                        <select class="form-control" ng-model="aircraft.model" ng-change="getSize()">
                                           <option ng-repeat="model in aircraftModalList">{{model}}</option>
                                        </select>
                                      </td>
                                      <td style="width: 30%">
                                        <select class="form-control" ng-model="aircraft.size">
                                           <option ng-repeat="size in aircraftSizeList">{{size}}</option>
                                        </select>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary" ng-click="addAircraft()">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div> -->
              </div>
              <div class="ibox-content">
                <div class="table-responsive">
                  <!-- <table class="table table-bordered table-hover table-striped">
                    <thead>
                      <tr>
                        <th>Tail</th>
                        <th>Make</th>
                        <th>Model</th>
                        <th>Size</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr ng-repeat="airData in getCraftList track by $index">
                        <td>
                          <input type="text" style="width:100px;" ng-model="airData.tail" class="form-control">
                        </td>
                        <td>
                          <select class="form-control" ng-model="airData.make">
                             <option>{{airData.make}}</option>
                          </select>
                        </td>
                        <td>
                          <select class="form-control" ng-model="airData.model">
                             <option>{{airData.model}}</option>
                          </select>
                        </td>
                        <td>
                          <select class="form-control" ng-model="airData.size">
                             <option>{{airData.size}}</option>
                          </select>
                        </td>
                      </tr>
                    </tbody>
                  </table> -->
                  <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <!-- <th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th> -->
                            <th>Tail</th>
                            <th>Make</th>
                            <th>Model</th>
                            <th>Size</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="aircraftData in aircraftDetails track by $index">
                            <!-- <td>
                                <input type="checkbox" ng-model="aircraftData.selected"/>
                            </td> -->
                            <td style="width: 20%">
                                <input type="text" class="form-control" ng-model="aircraftData.tail" required/>
                            </td>
                            <td style="width: 20%">
                                <select class="form-control" ng-model="aircraftData.make" ng-change="getModal(aircraftData.make, $index)">
                                  <option ng-repeat="make in aircraftMakeList">{{make}}</option>
                                </select>
                            </td>
                            <td style="width: 20%">
                                <select class="form-control" ng-model="aircraftData.model" ng-change="getSize(aircraftData.model, $index)">
                                    <option ng-repeat="model in aircraftData.aircraftModalList">{{model}}</option>
                                </select>
                            </td>
                            <td style="width: 20%">
                                <select class="form-control" ng-model="aircraftData.sizeId" ng-options="size.aircraftSize.id as size.aircraftSize.size for size in aircraftData.aircraftSizeList"></select>
                                <!-- <select class="form-control" ng-model="aircraftData.size">
                                  <option ng-repeat="size in aircraftData.aircraftSizeList">{{size}}</option>
                                </select> -->
                            </td>
                        </tr>
                      </tbody>
                  </table>
                </div>
                    <div class="col-xs-12" style="margin-bottom: 50px;margin-top: 10px;">
                       <button ng-click="addNew()" class="button1 turquoise pull-right"><span>+</span>Add Aircraft</button>
                    </div>
                     <div class="clearfix"></div>
                  </div>
               </div>
            </div>
            <div class="col-lg-5">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>Account Authenticatio & Payment Method</h5>
                        
                    </div>
                    <div class="ibox-content">
                       <!--  <div class="row">
                            <div class="col-md-3">
                                <img src="images/master.png">
                            </div>
                            <div class="col-md-9">
                                <div class="col">
                                    <span style="font-size: large; color: #909394;">**** **** **** 7002</span>
                                </div>
                                <div class="col">
                                    <span><strong>Expiry Date:</strong>10/16</span>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <br>

                            <div class="col-md-3">
                                <img src="images/visa1.png">
                            </div>
                            <div class="col-md-9">
                                <div class="col">
                                    <span style="font-size: large; color: #909394;">**** **** **** 1060</span>
                                </div>
                                <div class="col">
                                    <span><strong>Expiry Date:</strong>10/16</span>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div> -->


                        <div class="row">

                            <!-- <form name="myForm">

                                <div class="span3">
                                    <label for="">Card number</label>
                                    <input type="text" class="form-control" ng-model="number">
                                </div>

                                <div class="span3">
                                    <label for="">Name on card </label>
                                    <input type="text" class="form-control">
                                </div>

                                <div class="row"> 
                                    <div class="col-sm-6">
                                        <label for="">Expiry</label>
                                        <input type="text" class="form-control" ng-model="expiry">
                                    </div>

                                    <div class="col-sm-6">
                                        <label for="">CVV</label>
                                        <input type="text" class="form-control" ng-model="cvc">
                                    </div>
                                </div>
                                <div class="span4">
                                    <button type="submit" class="btn btn-primary btn-large">Add</button>
                                </div>
                                
                            </form> -->

                            <div class="container">
                                <div class="row">
                                  <div class="col-xs-12 col-md-4">
                                     <div class="panel panel-default credit-card-box">
                                        <div class="panel-heading display-table" >
                                           <div class="row display-tr" >
                                              <h3 class="panel-title display-td" >Payment Details</h3>
                                              <div class="display-td" >                            
                                                 <img class="img-responsive pull-right" src="http://i76.imgup.net/accepted_c22e0.png">
                                              </div>
                                           </div>
                                        </div>
                                        <div class="panel-body">
                                           <form role="form" id="payment-form">
                                              <div class="row">
                                                 <div class="col-xs-12">
                                                    <div class="form-group">
                                                       <label for="cardNumber">CARD NUMBER</label>
                                                       <div class="input-group">
                                                          <input type="number" ng-model="data.cardNumber" maxlength="16" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" class="form-control" name="cardNumber" placeholder="Valid Card Number" autocomplete="cc-number" required autofocus>
                                                          <span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
                                                       </div>
                                                    </div>
                                                 </div>
                                              </div>
                                              <div class="row">
                                                 <div class="col-xs-7 col-md-7">
                                                    <div class="form-group">
                                                       <label for="cardExpiry"><span class="hidden-xs">EXPIRATION</span><span class="visible-xs-inline">EXP</span> DATE</label>
                                                       <input type="text" ng-model="data.expiryDate" class="form-control" name="cardExpiry" placeholder="MM / YY" autocomplete="cc-exp"
                                                          required>
                                                    </div>
                                                 </div>
                                                 <div class="col-xs-5 col-md-5 pull-right">
                                                    <div class="form-group">
                                                       <label for="cardCVC">CVV CODE</label>
                                                       <input type="number"  maxlength="3" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" class="form-control" name="cardCVC" placeholder="CVC" autocomplete="cc-csc"
                                                          required>
                                                    </div>
                                                 </div>
                                              </div>
                                              <div class="row">
                                                 <div class="col-xs-12">
                                                    <div class="form-group">
                                                       <label for="name">Card Type</label>
                                                        <select class="form-control m-b" name="account" ng-model="data.cardType" style="margin-bottom: 0;">
                                                            <option value="creditCard" selected>Credit Card</option>
                                                            <option value="debitCard">Debit Card</option>
                                                        </select>
                                                    </div>
                                                 </div>
                                              </div>
                                              <div class="row">
                                                 <div class="col-xs-12">
                                                    <button class="btn btn-success btn-lg btn-block" type="submit" ng-click="addCard()">Add</button>
                                                 </div>
                                              </div>
                                              <div class="row" style="display:none;">
                                                 <div class="col-xs-12">
                                                    <p class="payment-errors"></p>
                                                 </div>
                                              </div>
                                           </form>
                                        </div>
                                     </div>
                                  </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>