<app-all-menus></app-all-menus>
<div class="topDiv">
  <div class="row"
    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <h4>{{'Job Card List' | translate}}</h4>
      <button class="btn btn-outline-warning btn-sm" [routerLink]="['/JobCardAdd']" mdtooltip="Add Job card"
        style="height: 31px; float: right;margin-top: -32px; margin: 4px; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
        class="btn btn-outline-warning btn-sm">
        Add Job Card<md-icon class="mat-icon material-icons" role="img"
          style="float: right;width:30px;height:30px;cursor:pointer" aria-hidden="true">add</md-icon>
      </button>
    </div>
  </div>

  <div class="row rowStyle">
    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
      <div class="row"
        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12">
         
          <div class="row" style="padding: 8px;margin-bottom: 8px;">
            <div class="col-md-4">
              <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
                <!-- from datetime picker -->
                <label>From</label>
                <input id="from_date" bsDatepicker class="form-control form-control-sm" [(ngModel)]="fromDate"
                  (ngModelChange)="changeDate()" style="height: 25px;" [bsConfig]="bsConfig" type="text">
              </div>
            </div>
            <div class="col-md-4">
              <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
                <!-- from datetime picker -->
                <label>To</label>
                <input id="todate" bsDatepicker class="form-control form-control-sm" [(ngModel)]="toDate"
                  (ngModelChange)="changeDate()" style="height: 25px;" [bsConfig]="bsConfig" type="text">
              </div>
            </div>

          </div>

          <div style="width: 100%;height:84vh;">
            <table id="deviceTable" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
              <thead style="background-color:#e0e0e0;color: #444444;">
                <tr>
                  <th style="text-align:left;width:100px">{{'Job Type'|translate}} </th>
                  <th style="text-align:left;width:100px">{{'Customer Name'|translate}} </th>
                  <th style="text-align:left;width:100px">{{'Mobile'|translate}} </th>
                  <th style="text-align:left;width:100px">{{'Address'|translate}} </th>
                  <th style="text-align:left;width:100px">{{'Location' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Description' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'No.Of Installation' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'SIM' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'IMEI' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Amount' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Payment Status' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Created On' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Schedule Date' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Completed On' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Status' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Remarks' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Technician' | translate}}</th>
                  <th style="text-align:left;width:100px">{{'Edit' | translate}}</th>

                </tr>
              </thead>
            </table>


          </div>