<div class="container">
  <div class="row" style="padding-bottom: 10px;">
    <div class="col-12">
        <p style="text-align: center; font-size: 20px;background: #2f4f60; color: white;">{{'ADD EXPENSE' | translate}}</p>
    </div>
  </div>
  <div class="row" style="margin: 0px;margin-bottom: 15px;">
    <div class="col-6" style="padding-top:0px;">
      <p style="margin-bottom: 0;">{{'Select Vehicle'|translate}}</p>
      <select id="dbselect_add" multiple="multiple">
        <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
      </select>
    </div>
    <div class="col-6">
      <p style="margin-bottom: 0;">{{'Select Date' | translate}}</p>
      <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" >
    </div>
  </div>
  <div class="row" style="margin: 0px;">
    <div class="col-6" style="padding-top:18px;">
        <input type="number" style="height:25px" min=0 class="form-control" [(ngModel)]="totalExpense" id="totalExpense" aria-describedby="emailHelp" placeholder="{{'Enter Amount' | translate}}">
    </div>
    <div class="col-6">
        <md-input-container style="display: inline;" class="example-full-width width"> 
            <input mdInput  [mdAutocomplete]="tdAutoedit" name="state" #state="ngModel" [(ngModel)]="optiondefault" (ngModelChange)="filterStates(optiondefault)">
           <md-autocomplete #tdAutoedit="mdAutocomplete">
              <md-option *ngFor="let option of dataSelect" [value]="option.country">
                <span>{{ option.country }}</span>
              </md-option>
            </md-autocomplete>   
          </md-input-container>
    </div>
  </div>
  <div class="row" style="margin: 0px;">
    <div class="col-6">
      <!-- <div class="row"> -->
        <!-- <div class="col-4"> -->
          <!-- <p>Payment Mode :</p> -->
        <!-- </div> -->
        <!-- <div class="col-8"> -->
            <md-select  style="display: inherit;" [(ngModel)]="prepaymentVal" placeholder="--{{'Payment Mode' | translate}}--"  ngDefaultControl>
                <md-option *ngFor="let payment of paymentMethod" [value]="payment.value">
                  {{payment.viewValue}}
                </md-option>
              </md-select>
        <!-- </div> -->
      <!-- </div> -->
     
    </div>
    <div class="col-6">
        <!-- <div class="row"> -->
            <!-- <div class="col-4"> -->
              <!-- <p>Expense Type :</p> -->
            <!-- </div> -->
            <!-- <div class="col-8"> -->
                <md-select  [(ngModel)]="expenseVal" style="display: inherit" placeholder="--{{'Expense type' | translate}}--"  ngDefaultControl>
                    <md-option *ngFor="let expense of expenseType" [value]="expense.value">
                      {{expense.viewValue}}
                    </md-option>
                  </md-select>
            <!-- </div> -->
          <!-- </div> -->
    </div>
  </div>
  <div clas="row" style="margin-top: 30px; text-align: center;">
    <div class="col-12">
        <button md-raised-button style="background: #31428c; color: white;" (click)="saveExpense()">{{'SAVE' | translate}}</button>
        <button md-raised-button style="background: #1d8216; color: white;" (click)="cancel()">{{'CLOSE' | translate}}</button>
    </div>     
  </div>
  <!-- <div class="row" style="padding-top: 40px;" >
    <div class= "col-12">
      <p *ngIf="showError" style="text-align: center; color: red; font-size: 15px;">{{errorMsg}}</p>
      <div style="margin-bottom: 15px; font-weight: 600;">
        <span>{{'Total Expense' | translate }} :</span><span style="margin-left: 30px; font-weight: 600;">INR</span><span style="margin-left: 10px; font-weight: 600;">{{expenseTotal}}</span>
      </div>
    
        <table id='test_history' class="table table-striped table-hover" style="overflow-y: hidden;
          overflow-x: hidden;font-size:12px">
          <thead>
            <tr>
              <th style="text-align:center">{{'Vehicle Name' | translate}}</th>
              <th style="text-align:center">{{'Amount' | translate}}</th>
              <th style="text-align:center">{{'Currency' | translate}}</th>
              <th style="text-align:center">{{'Payment Mode' | translate}}</th>
              <th style="text-align:center">{{'Expense type' | translate}}</th>
          </thead>
          <tbody>
            <tr *ngFor="let expObj of expenseArr">
              <td style="text-align: center">{{(expObj.vehicle != null)?expObj.vehicle.Device_Name : "NA"}}</td>
              <td style="text-align: center">{{expObj.amount ? expObj.amount : "0"}}</td>
              <td style="text-align: center">{{expObj.currency}}</td>
              <td style="text-align: center">{{expObj.payment_mode}}</td>
              <td style="text-align: center">{{expObj.type}}</td>
              <td style="text-align: center;cursor:pointer">
                  <div>
                      <i class="fas fa-trash-alt" (click)="delete(expObj)" style="font-size: 20px;color: #2e3e84;cursor: pointer"></i>
                    </div>  
              </td>
            </tr>
          </tbody>
        </table>

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