<style>
     .subnavbar .mainnav > li:nth-child(2) > a{
     color: #ff9900;
     }
  </style>

  <div class="myLoader" ng-show="showLoader">
    <img src="../img/hourglass.gif" width="50px;">
  </div>

  <div class="container">
     <div class="row">
        <div class="col-md-5">
           <div class="widget stacked">
              <div class="widget-header">

                 <i class="fa fa-pencil"></i>

                 <h3>Price Manager</h3>

                 <select style="float: right; margin: 7px 10px; width: 150px; height: 26px; padding: 0 0;" class="form-control" ng-model="sendEmail.pricing" ng-change="confirmMail()">
                    <option value="" disabled selected="selected">Send Pricing Email</option>
                    <option ng-repeat="margins in marginList" value="{{margins.id}}">{{margins.marginName}}</option>
                    <option disabled>_______________</option>
                    <option value="all">Distribute All</option>

                 </select>
              </div>
              <!-- /widget-header -->
              <div class="widget-content">

                 <h4>Update Fuel Price Here</h4>
                 <table class="table">

                    <thead>
                       <tr>
                          <th> Product</th>
                          <th> Cost</th>
                          <th> Margin</th>
                          <th> PAP(Total)</th>

                          <th style="color: #F90;"> Expires</th>

                       </tr>
                    </thead>
                    <tbody>

                       <tr ng-repeat="fuelPricing in newFuelPricing">

                          <td>

                             <span>{{fuelPricing.name}}</span>

                          </td>
                          <td>

                             <input type="text" class="form-control" ng-model="fuelPricing.fuelPricing.cost" style="height:31px; width: 50px; padding: 6px 6px">

                          </td>
                          <td>

                             <input type="text" class="form-control" ng-model="fuelPricing.fuelPricing.papMargin" style="height:31px; width: 50px; padding: 6px 6px;">

                          </td>
                          <td>

                             <span style="line-height: 31px; color: #1ab394;">$ {{fuelPricing.fuelPricing.cost -- fuelPricing.fuelPricing.papMargin  | number : 2 }}</span>

                          </td>
                          <td>

                             <input type="text" class="form-control" datepicker ng-model="fuelPricing.fuelPricing.expirationDate" style="height:31px; width: 100px; padding: 6px 6px;">

                          </td>

                       </tr>
                    </tbody>
                 </table>
                 <div class="row" style="margin-left: 0px;">
                    <div class="col-md-12" style= "text-align: right;">

                       <button type="button" class="btn btn-success btn-xs" ng-click="updateFuelPricingClick()">Save</button>

                    </div>
                 </div>
              </div>
              <!-- /widget-content -->
           </div>
           <!-- /widget -->  
        </div>

        <div class="col-md-7">
           <div class="widget stacked">
              <div class="widget-header">

                 <i class="fa fa-pencil"></i>

                 <h3><b>JET-A</b> Customer Margin Template</h3>

                 <div class="pull-right">

                    <button type="submit" class="btn btn-success btn-sm" ng-click="addNewMarginBtn()" style="margin-top: 4px; margin-right: 10px;"><i class="fa fa-plus" aria-hidden="true"></i> Add New Margin</button>

                 </div>

              </div>
              <!-- /widget-header -->

              <div class="widget-content" style="padding-top: 10px;">

                 <section id="accordions">
                    <div class="newCustomAccordian">
                       <!-- tab 1 -->

                       <div ng-repeat="jets in aTypeJets">
                          <div class="customAccordianHeader" id="{{jets.id}}">
                             <span>{{jets.marginName}}</span>
                             <select class="form-control" disabled="true" ng-model="jets.pricingStructure">
                                <option value="" disabled selected>Pricing Structure</option>
                                <option value="minus">Retail-(minus)</option>
                                <option value="plus">Cost+(plus)</option>
                                <option value="equal">Direct=(equal)</option>
                             </select>
                             <span style="margin-right: 0;">$</span>
                             <input type="text" disabled="true" class="form-control" ng-model="jets.marginValue">
                             <div class="pull-right">

                                <button class="btn btn-success" style="display: none; background-image: none; background-color: #f3f3f3; color: #333; border:0;" ng-click="closeAccordian(jets)">Close</button>

                                <button class="btn btn-success" style="display: none;" ng-click="saveJetAccordian(jets)">Save</button>
                                <button class="btn btn-danger" style="display: none;" ng-click="deleteJetAccordian(jets.id)">Delete</button>

                                <button class="btn btn-default" ng-click="toggleJestAccordian(jets.id, $index)">Edit</button>

                             </div>
                             <div class="clearfix"></div>
                          </div>
                          <div class="customAccordianTabBody {{jets.id}}" style="display: none;">

                             <div class="tierListWrap" ng-repeat="tier in aTypeJets[$index].tierList">

                                <div class="tierListHead" style="height: 36px;">
                                   <span class="pull-left tierHeadingSpan" ng-hide="showEditTier">{{tier.minTierBreak}}-{{tier.maxTierBreak}} gal.
                                   </span>
                                   <i class="fa fa-pencil-square-o pull-right" ng-click="showEditTier = ! showEditTier" ng-hide="showEditTier" style="margin-top: 5px; cursor: pointer;" aria-hidden="true"></i>
                                   
                                   <input type="text" placeholder="min" style="width: 36px;" ng-model="tier.minTierBreak" ng-show="showEditTier">
                                   <span ng-show="showEditTier">-</span> 
                                   <input type="text" placeholder="max" style="width: 36px;" ng-model="tier.maxTierBreak" ng-show="showEditTier"> <b ng-show="showEditTier">gal.</b>
                                   <div class="clearfix"></div>
                                </div>
                                <div class="tierListBody" style="height: 35px;">
                                   <span class="pull-left minTierSpan" ng-hide="showEditTier">-${{tier.margin}}</span> 
  
                                   <input type="text" placeholder="max" style="width: 36px;" ng-model="tier.margin" ng-show="showEditTier"> &nbsp; 

                                   <span class="pull-right maxTierSpan" ng-hide="showEditTier">(${{tier.marginTotal | number : 2}})</span>

                                   <button class="addTierBtn" ng-click="editTier(tier, $parent.$index)" ng-show="showEditTier">Save</button>

                                   <i class="fa fa-trash-o deleteTierIcon" ng-click="deleteTier(tier.id, jets.id, $parent.$index)" aria-hidden="true" ng-show="showEditTier"></i>

  
                                   <div class="clearfix"></div>
                                </div>
                             </div>
                             <div class="tierListWrap" style="width: 160px;">
                                <div class="tierListHead" style="border-right: 1px solid #ddd;">

                                   <input type="text" placeholder="min" ng-model="trData[$index].minTierBreak">

                                   <span>-</span> 

                                   <input type="text" placeholder="max" ng-model="trData[$index].maxTierBreak"> <b>gal.</b>

                                   <div class="clearfix"></div>
                                </div>
                                <div class="tierListBody" style="border-right: 1px solid #ddd;">
                                   <span style="color: #449d44;">$</span>

                                   <input type="text" placeholder="margin" ng-model="trData[$index].margin" class="tierTextBox" style="width: 70px; height: 24px;">
                                   <button class="addTierBtn" ng-click="addNewTier(jets.id, trData, $index)">Add Tier</button>

                                   <div class="clearfix"></div>
                                </div>
                             </div>
                             <!-- <div class="tierListWrap" style="width: 32px;">
                                <div class="tierListHead" style="height: 36px; border-right: 1px solid #ddd;">
                                   &nbsp;
                                </div>
                                <div class="tierListBody" style="height: 35px; border-right: 1px solid #ddd;">
                                   <i class="fa fa-trash-o deleteTierIcon" aria-hidden="true"></i>
                                </div>
                             </div> -->
                             <div class="clearfix"></div>

                             <!-- <textarea class="form-control resizeTextarea" ng-model="jets.message" placeholder="Message..."></textarea> -->
                             <br/>
                             <div ckeditor="options" ng-model="jets.message" ready="onReady()"></div>

                          </div>

                       </div>

                    </div>

                 </section>

                 <!-- <div class="row">&nbsp;</div>

                 <div class="row">
                    <div class="form-group">
                       <div class="col-lg-12 text-right">
                          <button type="submit" class="btn btn-success"><i class="icon-ok"></i> Save Form</button>&nbsp;&nbsp;
                          <button type="reset" class="btn btn-default">Cancel</button>
                       </div>

                    </div>

                 </div> -->

              </div>
              <!-- /widget-content -->
           </div>
           <!-- /widget -->
        </div>
        <!-- /span6 -->
     </div>
     <!-- /span12 -->
  </div>
  <!-- /row -->

  <div class="container">
  <div class="row">
     <div class="col-md-5">
           <div class="widget stacked">
              <div class="widget-header">
                 <i class="fa fa-pencil"></i>

                 <h3>Queue Future Pricing</h3>

              </div>
              <!-- /widget-header -->
              <div class="widget-content">

                 <h4>Update Queue Future Fuel Pricing Here</h4>
                 <table class="table">

                    <thead>
                       <tr>
                          <th> Product</th>
                          <th> Cost</th>

                          <th> PAP(Total)</th>
                          <th> Deploy</th>
                          <th style="color: #F90;"> Next Expiration</th>

                       </tr>
                    </thead>
                    <tbody>

                       <tr ng-repeat="fuelPricing in newFuelPricing">

                          <td>

                             <span>{{fuelPricing.name}}</span>

                          </td>
                          <td>

                             <input type="text" class="form-control" ng-model="fuelPricing.futureFuelPricing.cost" style="height:31px; width: 50px; padding: 6px 6px;">

                          </td>
                          <td>

                             <span style="line-height: 31px; color: #1ab394;">$ {{fuelPricing.futureFuelPricing.cost -- fuelPricing.fuelPricing.papMargin  | number : 2}}</span>

                          </td>
                          <td>

                             <input type="text" class="form-control" ng-disabled="fuelPricing.futureFuelPricing.cost == undefined || fuelPricing.futureFuelPricing.cost == null || fuelPricing.futureFuelPricing.cost == ''" datepicker ng-model="fuelPricing.futureFuelPricing.deployDate" style="height:31px; width: 100px; padding: 6px 6px;">

                          </td>
                          <td>

                             <input type="text" class="form-control" datepicker  ng-disabled="fuelPricing.futureFuelPricing.cost == undefined || fuelPricing.futureFuelPricing.cost == null || fuelPricing.futureFuelPricing.cost == ''" ng-model="fuelPricing.futureFuelPricing.nextExpiration" style="height:31px; width: 100px; padding: 6px 6px;">

                          </td>

                       </tr>
                    </tbody>
                 </table>
                 <div class="row" style="margin-left: 0px;">
                    <div class="col-md-12" style= "text-align: right;">

                       <button type="button" class="btn btn-success btn-xs" ng-click="updateFutureFuelPricingClick()">Save</button>

                    </div>
                 </div>
              </div>
              <!-- /widget-content -->
           </div>
           <!-- /widget -->  
     </div>
     <div class="col-md-7">
           <div class="widget stacked">
              <div class="widget-header">
                 <i class="fa fa-pencil"></i>

                 <h3><b style="color: 39c;">AVGAS 100LL </b> <i>Customer Margin Template</i></h3>

                 <div class="pull-right">

                    <button type="submit" class="btn btn-success btn-sm" ng-click="addNewVtypePop()" style="margin-top: 4px; margin-right: 10px;"><i class="fa fa-plus" aria-hidden="true"></i> Add New Margin</button>

                 </div>
              </div>
              <!-- /widget-header -->

              <div class="widget-content" style="padding-top: 10px;">

                 <section id="accordions">
                    <div class="newCustomAccordian">
                       <!-- tab 1 -->
                       <div ng-repeat="jets in vTypeJets">
                          <div class="customAccordianHeader" id="{{jets.id}}">
                             <span>{{jets.marginName}}</span>
                             <select class="form-control" disabled="true" ng-model="jets.pricingStructure">
                                <option value="" disabled selected>Pricing Structure</option>
                                <option value="minus">Retail-(minus)</option>
                                <option value="plus">Cost+(plus)</option>
                                <option value="equal">Direct=(equal)</option>
                             </select>
                             <span style="margin-right: 0;">$</span>
                             <input type="text" disabled="true" class="form-control" ng-model="jets.marginValue">
                             <div class="pull-right">

                                <button class="btn btn-success" style="display: none; background-image: none; background-color: #f3f3f3; color: #333; border:0;" ng-click="closeAccordianVtype(jets)">Close</button>

                                <button class="btn btn-success" style="display: none;" ng-click="saveVtypeJetAccordian(jets)">Save</button>
                                <button class="btn btn-danger" style="display: none;" ng-click="deleteVtypeJetAccordian(jets.id)">Delete</button>
                                <button class="btn btn-default" ng-click="toggleVtypeJestAccordian(jets.id, $index)">Edit</button>

                             </div>

                             <div class="clearfix"></div>

                          </div>

                          <div class="customAccordianTabBody {{jets.id}}" style="display: none;">
                             <div class="tierListWrap" ng-repeat="tier in vTypeJets[$index].tierList">
                                <div class="tierListHead" style="height: 36px;">
                                   <span class="pull-left tierHeadingSpan" ng-hide="showEditTier">{{tier.minTierBreak}}-{{tier.maxTierBreak}} gal.
                                   </span>
                                   <i class="fa fa-pencil-square-o pull-right" ng-click="showEditTier = ! showEditTier" ng-hide="showEditTier" style="margin-top: 5px; cursor: pointer;" aria-hidden="true"></i>
                                   
                                   <input type="text" placeholder="min" style="width: 36px;" ng-model="tier.minTierBreak" ng-show="showEditTier">
                                   <span ng-show="showEditTier">-</span> 
                                   <input type="text" placeholder="max" style="width: 36px;" ng-model="tier.maxTierBreak" ng-show="showEditTier"> <b ng-show="showEditTier">gal.</b>
                                   <div class="clearfix"></div>

                                </div>

                                <div class="tierListBody" style="height: 35px;">
                                   <span class="pull-left minTierSpan" ng-hide="showEditTier">-${{tier.margin}}</span> 
  
                                   <input type="text" placeholder="max" style="width: 36px;" ng-model="tier.margin" ng-show="showEditTier"> &nbsp; 

                                   <span class="pull-right maxTierSpan" ng-hide="showEditTier">(${{tier.marginTotal | number : 2}})</span>

                                   <button class="addTierBtn" ng-click="editVtypeTier(tier, $parent.$index)" ng-show="showEditTier">Save</button>

                                   <i class="fa fa-trash-o deleteTierIcon" ng-click="deleteVtypeTier(tier.id, jets.id, $parent.$index)" aria-hidden="true" ng-show="showEditTier"></i>

  
                                   <div class="clearfix"></div>

                                </div>

                             </div>
                             <div class="tierListWrap" style="width: 160px;">
                                <div class="tierListHead" style="border-right: 1px solid #ddd;">
                                   <input type="text" placeholder="min" ng-model="vtrData[$index].minTierBreak">
                                   <span>-</span> 
                                   <input type="text" placeholder="max" ng-model="vtrData[$index].maxTierBreak"> <b>gal.</b>
                                   <div class="clearfix"></div>

                                </div>

                                <div class="tierListBody" style="border-right: 1px solid #ddd;">
                                   <span style="color: #449d44;">$</span>
                                   <input type="text" placeholder="margin" ng-model="vtrData[$index].margin" class="tierTextBox" style="width: 70px; height: 24px;">
                                   <button class="addTierBtn" ng-click="addNewVtypeTier(jets.id, vtrData, $index)">Add Tier</button>
                                   <div class="clearfix"></div>

                                </div>
                             </div>

                             <!-- <div class="tierListWrap" style="width: 32px;">
                                <div class="tierListHead" style="height: 36px; border-right: 1px solid #ddd;">
                                   &nbsp;
                                </div>
                                <div class="tierListBody" style="height: 35px; border-right: 1px solid #ddd;">
                                   <i class="fa fa-trash-o deleteTierIcon" aria-hidden="true"></i>
                                </div>
                             </div> -->
                             <div class="clearfix"></div>

                             <br/>
                             <div ckeditor="options" ng-model="jets.message" ready="onReady()"></div>

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

                 </section>

                 <!-- <div class="row">&nbsp;</div>

                 <div class="row">
                    <div class="form-group">
                       <div class="col-lg-12 text-right">
                          <button type="submit" class="btn btn-success"><i class="icon-ok"></i> Save Form</button>&nbsp;&nbsp;
                          <button type="reset" class="btn btn-default">Cancel</button>
                       </div>

                    </div>

                 </div> -->

              </div>
              <!-- /widget-content -->
           </div>
           <!-- /widget -->
     </div>
        <!-- /span6 -->
  </div>
  </div>
  </div>

  </div> <!-- /container -->

  
  
  <div class="addNewMargin" style="display: none;">
     <div class="customBackdrop">
        <div class="customModalInner" style="max-width: 700px;">
           <div class="customModelHead">
              <p class="pull-left">
                 <i class="fa fa-list-alt" aria-hidden="true"></i>
                 Add New JET-A Customer Margin
              </p>
              <p class="pull-right">
                 <i class="fa fa-times" aria-hidden="true" style="cursor: pointer;" ng-click="closeMarginPopup()"></i>
              </p>
              <div class="clearfix"></div>
           </div>
           <div class="customModelBody">
              
              <div class="customAccordianHeader customActive">
                 <input type="text" class="form-control" style="width: 120px; margin-right: 10px;" placeholder="Margin Name" ng-model="newJet.marginName">
                 <select class="form-control" ng-model="newJet.pricingStructure">
                    <option value="" disabled selected>Pricing Structure</option>
                    <option value="minus">Retail-(minus)</option>
                    <option value="plus">Cost+(plus)</option>
                    <option value="equal">Direct=(equal)</option>
                 </select>
                 <span style="margin-right: 0;">$</span>
                 <input type="text" class="form-control" style="width: 120px;" placeholder="Margin Price" ng-model="newJet.marginValue">
                 <div class="clearfix"></div>
              </div>
              <div class="customAccordianTabBody">

                 <div ckeditor="options" ng-model="newJet.message" ready="onReady()"></div>

              </div>
  
           </div>
           <div class="customModelFooter text-center">
              <input type="submit" value="Save" class="btn" ng-click="addNewATypeJet()">
              <button class="btn" ng-click="closeMarginPopup()">Cancel</button>
           </div>
        </div>
     </div>
  </div>

  <div class="addNewVtype" style="display: none;">
     <div class="customBackdrop">
        <div class="customModalInner" style="max-width: 700px;">
           <div class="customModelHead">
              <p class="pull-left">
                 <i class="fa fa-list-alt" aria-hidden="true"></i>
                 Add New AVGAS 100LL Customer Margin Template
              </p>
              <p class="pull-right">
                 <i class="fa fa-times" aria-hidden="true" style="cursor: pointer;" ng-click="closeNewVtypePop()"></i>
              </p>
              <div class="clearfix"></div>
           </div>
           <div class="customModelBody">
              
              <div class="customAccordianHeader customActive">
                 <input type="text" class="form-control" style="width: 120px; margin-right: 10px;" placeholder="Margin Name" ng-model="newVtypeJet.marginName">
                 <select class="form-control" ng-model="newVtypeJet.pricingStructure">
                    <option value="" disabled selected>Pricing Structure</option>
                    <option value="minus">Retail-(minus)</option>
                    <option value="plus">Cost+(plus)</option>
                    <option value="equal">Direct=(equal)</option>
                 </select>
                 <span style="margin-right: 0;">$</span>
                 <input type="text" class="form-control" style="width: 120px;" placeholder="Margin Price" ng-model="newVtypeJet.marginValue">
                 <div class="clearfix"></div>
              </div>
              <div class="customAccordianTabBody">

                 <div ckeditor="options" ng-model="newVtypeJet.message" ready="onReady()"></div>

              </div>
  
           </div>
           <div class="customModelFooter text-center">
              <input type="submit" value="Save" class="btn" ng-click="addNewVTypeJet()">
              <button class="btn" ng-click="closeNewVtypePop()">Cancel</button>
           </div>
        </div>
     </div>
  </div>

  <div class="customConfirmPopBackdrop" id="confirm1" style="display: none;">
    <div class="customModalInner">
       <div class="customModelBody" style="border-radius: 5px 5px 0 0;">
          <table>
             <tr>
                <td>
                   <img src="img/info.png" style="width: 50px;">
                </td>
                <td>
                   <p style="padding: 5px 10px; margin-bottom: 0;">Are you sure that you want to email pricing to everyone in your contact list?</p>
                </td>
             </tr>
          </table>
       </div>
       <div class="customModelFooter text-right" style="border-radius: 0 0 5px 5px;">
          <button class="btn" style="padding: 4px 0; width: 80px;" ng-click="saveAndCloseConfirm()">Yes</button>
          <button class="btn" style="padding: 4px 0; width: 80px;" ng-click="cancelAndCloseConfirm()">Cancel</button>
       </div>
    </div>
  </div>

  <div class="customConfirmPopBackdrop" id="deleteTierConfirm" style="display: none;">
    <div class="customModalInner">
       <div class="customModelBody" style="border-radius: 5px 5px 0 0;">
          <table>
             <tr>
                <td>
                   <img src="img/info.png" style="width: 50px;">
                </td>
                <td>
                   <p style="padding: 5px 10px; margin-bottom: 0;">Are you sure that you want to delete this Tier ?</p>
                </td>
             </tr>
          </table>
       </div>
       <div class="customModelFooter text-right" style="border-radius: 0 0 5px 5px;">
          <button class="btn" style="padding: 4px 0; width: 80px;" ng-click="confirmDeleteTier()">Yes</button>
          <button class="btn" style="padding: 4px 0; width: 80px;" ng-click="cancelTierDelete()">Cancel</button>
       </div>
    </div>
  </div>
  
  <div class="customConfirmPopBackdrop" id="deleteVtypeTierConfirm" style="display: none;">
    <div class="customModalInner">
       <div class="customModelBody" style="border-radius: 5px 5px 0 0;">
          <table>
             <tr>
                <td>
                   <img src="img/info.png" style="width: 50px;">
                </td>
                <td>
                   <p style="padding: 5px 10px; margin-bottom: 0;">Are you sure that you want to delete this Tier ?</p>
                </td>
             </tr>
          </table>
       </div>
       <div class="customModelFooter text-right" style="border-radius: 0 0 5px 5px;">
          <button class="btn" style="padding: 4px 0; width: 80px;" ng-click="confirmDeleteVtypeTier()">Yes</button>
          <button class="btn" style="padding: 4px 0; width: 80px;" ng-click="cancelVtypeTierDelete()">Cancel</button>
       </div>
    </div>
  </div>

  <div class="customConfirmPopBackdrop" id="deleteMargin" style="display: none;">
    <div class="customModalInner">
       <div class="customModelBody" style="border-radius: 5px 5px 0 0;">
          <table>
             <tr>
                <td>
                   <img src="img/info.png" style="width: 50px;">
                </td>
                <td>
                   <p style="padding: 5px 10px; margin-bottom: 0;">Are you sure that you want to delete this Margin Template ?</p>
                </td>
             </tr>
          </table>
       </div>
       <div class="customModelFooter text-right" style="border-radius: 0 0 5px 5px;">
          <button class="btn" style="padding: 4px 0; width: 80px;" ng-click="confirmDeleteMargin()">Yes</button>
          <button class="btn" style="padding: 4px 0; width: 80px;" ng-click="cancelMarginDelete()">Cancel</button>
       </div>
    </div>
  </div>
  
  <div class="customConfirmPopBackdrop" id="deleteVtypeMargin" style="display: none;">
    <div class="customModalInner">
       <div class="customModelBody" style="border-radius: 5px 5px 0 0;">
          <table>
             <tr>
                <td>
                   <img src="img/info.png" style="width: 50px;">
                </td>
                <td>
                   <p style="padding: 5px 10px; margin-bottom: 0;">Are you sure that you want to delete this Margin Template ?</p>
                </td>
             </tr>
          </table>
       </div>
       <div class="customModelFooter text-right" style="border-radius: 0 0 5px 5px;">
          <button class="btn" style="padding: 4px 0; width: 80px;" ng-click="confirmDeletVtypeMargin()">Yes</button>
          <button class="btn" style="padding: 4px 0; width: 80px;" ng-click="cancelVtypeMarginDelete()">Cancel</button>
       </div>
    </div>
  </div>

  <!-- Le javascript
     ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->

  <!-- <script>

     CKEDITOR.replace( 'editor2', {
        height: 250,
        extraPlugins: 'divarea'
     } );

  </script> -->