<app-all-menus></app-all-menus>
<div class="row tab-pane fade show active">
<div class="col-xl-12 col-lg-12">
  <div class="card shadow mb-4" style="margin: 70px 15px 9px 15px;">
    <!-- Card Header - Dropdown -->
    <div class="card-header">
      <!-- <h6 class="m-0 font-weight-bold text-primary text-center">{{'Schedule Report' | translate}}</h6> -->
      <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 >{{'Schedule Report' | translate}}</h4>
      
        </div>
      </div>
    </div>
    <!-- Card Body enable report scheduler-->
    <div class="card-body">
      <form [formGroup]="form" (ngSubmit)="submit()">
      <div class="row">
        <!-- <div class="col-4">
          <div>
            <label for="enableReport" style="font-weight: 500;">{{'enable report scheduler' | translate}}</label>
          </div>
        </div> -->
        <div class="col-4">
          <div>
            <label for="enableReport" style="font-weight: 500;">{{'Enable report scheduler' | translate}}</label>
            <md-checkbox formControlName="scheduled_excel_report"  name="enableReport"></md-checkbox>
          </div>
        </div>
      </div>
    <table class="table table-borderless" style="width: 450px;">
      <thead>
        <tr class="text-center">
          <th scope="col">Action</th>
          <th  scope="col">Report Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="text-align: center;">
            <md-checkbox name="Geofencing" formControlName="Geofencing"></md-checkbox>
          </td>
          <td>
            <label for="Geofencing"  style="font-weight: 500;">{{'Geofencing Report' | translate}}</label>
          </td>
          </tr>
          <tr>
            <td style="text-align: center;">
              <md-checkbox name="fuel"  formControlName="fuel"></md-checkbox>
            </td>
            <td>
              <label for="fuel" style="font-weight: 500;">{{'Fuel Report' | translate}}</label>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">
              <md-checkbox name="ignition" formControlName="ignition"></md-checkbox>
            </td>
            <td>
              <label for="ignition" style="font-weight: 500;">{{'Ignition Report' | translate}}</label>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">
              <md-checkbox name="overspeed" formControlName="overspeed"></md-checkbox>
            </td>
            <td>
              <label for="overspeed" style="font-weight: 500;">{{'Overspeed Report' | translate}}</label>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">
              <md-checkbox name="rViolation" formControlName="rViolation"></md-checkbox>
            </td>
            <td>
              <label for="rViolation" style="font-weight: 500;">{{'Violation Report' | translate}}</label>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">
              <md-checkbox name="sos" formControlName="sos"></md-checkbox>
            </td>
            <td>
              <label for="sos" style="font-weight: 500;">{{'SOS Report' | translate}}</label>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">
              <md-checkbox name="stoppage" formControlName="stoppage"></md-checkbox>
            </td>
            <td>
              <label for="stoppage" style="font-weight: 500;">{{'Stoppage Report' | translate}}</label>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">
              <md-checkbox name="summary" formControlName="summary"></md-checkbox>
            </td>
            <td>
              <label for="summary" style="font-weight: 500;">{{'Summary Report' | translate}}</label>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">
              <md-checkbox name="trip" formControlName="trip"></md-checkbox>
            </td>
            <td>
              <label for="trip" style="font-weight: 500;">{{'Trip Report' | translate}}</label>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">
              <md-checkbox name="distance" formControlName="distance"></md-checkbox>
            </td>
            <td>
              <label for="distance" style="font-weight: 500;">{{'Distance Report' | translate}}</label>
            </td>
          </tr>
          <tr>
            <td style="text-align: center;">
              <md-checkbox name="daily" formControlName="daily"></md-checkbox>
            </td>
            <td>
              <label for="daily" style="font-weight: 500;">{{'Daily Report' | translate}}</label>
            </td>
          </tr>
          </tbody>
          </table>
          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Send Mail to' | translate}}</label>
          <div class="row">
          <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
            <input type="email" [ngClass]="{ 'is-invalid': submitted && f.email1.errors }" class="form-control" formControlName="email1"
               placeholder="Please Enter Frist Email"> 
                <div *ngIf="submitted && f.email1.errors" class="invalid-feedback">
                             <div *ngIf="f.email1.errors.email">Email must be a valid email address</div>
                        </div>
          </div>
          <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
            <input type="email" [ngClass]="{ 'is-invalid': submitted && f.email2.errors }" class="form-control" formControlName="email2" 
              placeholder="Please Enter Second Email"> 
               <div *ngIf="submitted && f.email2.errors" class="invalid-feedback">
                            
                            <div *ngIf="f.email2.errors.email">Email must be a valid email address</div>
                        </div>
          </div>
          <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
            <input type="email" [ngClass]="{ 'is-invalid': submitted && f.email3.errors }" class="form-control" formControlName="email3" 
              placeholder="Please Enter Third Email"> 
               <div *ngIf="submitted && f.email3.errors" class="invalid-feedback">
                          <div *ngIf="f.email3.errors.email">Email must be a valid email address</div>
                        </div>
          </div>
          </div>
          <div class="row mt-3">
          <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
            <input type="email" [ngClass]="{ 'is-invalid': submitted && f.email4.errors }" class="form-control" formControlName="email4" 
              placeholder="Please Enter Fourth Email"> 
               <div *ngIf="submitted && f.email4.errors" class="invalid-feedback">
                            <div *ngIf="f.email4.errors.email">Email must be a valid email address</div>
                        </div>
          </div>
          <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
            <input type="email" [ngClass]="{ 'is-invalid': submitted && f.email5.errors }" class="form-control" formControlName="email5" 
              placeholder="Please Enter Fifth Email"> 
               <div *ngIf="submitted && f.email5.errors" class="invalid-feedback">
                            <div *ngIf="f.email5.errors.email">Email must be a valid email address</div>
                        </div>
          </div>
</div>
         
          <div class="card-footer text-center mt-3">
            <button class="btn btn-primary" type="submit">Submit</button>
          </div>

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