<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">
    <button (click)="loaction.back()" type="button" style="float: left;color: beige;" class="btn btn-outline-primary"><i class="fa fa-arrow-left"></i>  Back</button>
      <h4>{{'Add Geo Fence' | translate}}</h4>
    </div>
  </div> 
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div id="toast">
        <div id="desc">{{data_descip}}</div>
      </div>
    </div>
  </div>
  <div class="row" style="padding:0px">
    <div class="col-sm-3 col-md-3 col-lg-3" style="padding:0px">
      <div class="row" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 25px; padding-right: 0px;">
          <div class="row" style="margin: 0;margin-bottom: 10px;">
            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
              <p style="margin-bottom: 0; padding-top: 4px;font-size: 12px">{{'Address' | translate}}</p>
            </div>
            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;">    
              <input id="pac-input" class="form-control" type="text" style="height: 28px; width: 230px; margin-left: 0;" placeholder="Search Places">  
            </div>
          </div>
            <!-- <div class="row" style="margin: 0;margin-bottom: 10px;">
                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
                  <p style="margin-bottom: 0; padding-top: 4px;font-size: 12px">{{'Group' | translate}}</p>
                </div>
                <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;">  
                  <select id="dbselect" multiple="multiple">
                    <option *ngFor="let grp of grpName" [value]="grp._id">{{grp.name}}</option>
                  </select>  -->
               
                    <!-- <md-select style="display: grid;padding-top:11px;" name="neww" placeholder="--{{'Select group' | translate}}--" [(ngModel)]="grp">
                      <md-option *ngFor="let grp of grpName" [value]="grp">
                        {{grp.name}}
                      </md-option>
                    </md-select> -->
                <!-- </div>
              </div> -->
            <div class="row" style="margin: 0;margin-bottom: 10px;">
                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
                  <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px;">{{'Geofence Type' | translate}}</p>
                </div>
                <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;">
                  <select id="dbselect_1" multiple="multiple">
                    <option *ngFor="let geoT of geoType" [value]="geoT">{{geoT}}</option>
                  </select> 
                  <!-- <md-select style="display: grid;padding-top:11px;" name="neww" placeholder="--{{'Geofence type' | translate}}--" [(ngModel)]="geoT">
                    <md-option *ngFor="let geoT of geoType" [value]="geoT">
                      {{geoT}}
                    </md-option>
                  </md-select> -->
                </div>
              </div>   
              <!-- <div class="row" style="margin: 0;margin-top: 5px;">
                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
                  <p style="margin-bottom: 0; padding-top: 15px;font-size: 12px;">{{'Drawing Type' | translate}}</p>
                </div>
                <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;">
             
                 
                </div>
              </div>        -->
              <div class="row" style="margin: 0;margin-bottom: 10px;">
                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0px; padding-right: 10px;">
                  <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px;">{{'Geofence Name' | translate}}</p>
                </div>
                <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 15px;">
                  <!-- <md-form-field class="example-full-width width" style="width:100%;float:left"> -->
                    <input type="text" style="height: 28px;" class="form-control" name="geoname" type="text" [(ngModel)]="geoname"  placeholder="{{'Geofence Name' | translate}}" />
                    <!-- <input mdInput class="no-spin" [(ngModel)]="geoname" name=" geoname" placeholder="--{{'GEO FENCE NAME' | translate}}--" required/> -->
                    <!-- <md-error class="required">{{'Enter GEO FENCE NAME' | translate}}</md-error> -->
                  <!-- </md-form-field> -->
                </div>
              </div>   
              <div class="row" style="margin: 0;margin-bottom: 10px;">
                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
                  <p style="margin-bottom: 0;font-size: 12px;">{{'Halt Alert' | translate}}</p>          
                </div>
                <div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 10px;">  
                  <md-checkbox [(ngModel)]="halt_alert" style="float:left;margin-top: 4px;"></md-checkbox>           
                  <input [disabled] = "halt_alert === false" style="height: 28px;width: 60%;display: inline;float: right;" class="form-control" name="halt" type="number" [(ngModel)]="haltAlert" placeholder="Min." />             
                </div>
                <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0px;padding-top: 5px;"> 
                  <p>Min.</p>
                 </div>
              </div>
              <div class="row" style="margin: 0;">
                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
                  <p style="margin-bottom: 0;font-size: 12px;">{{'Geofence Alert' | translate}}</p>
                </div>
                <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px;">    
                  <md-checkbox [(ngModel)]="enter" style="float:left;">{{'Entering' | translate}}</md-checkbox>     
                  <md-checkbox style="float:left;margin-left: 20px;" [(ngModel)]="exit">{{'Exiting' | translate}}</md-checkbox>
                </div>
              </div>   
              <div class="row" style="margin: 0;margin-bottom: 10px;">
                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
                  <p style="margin-bottom: 0;font-size: 12px;">{{'Geofence Color' | translate}}</p>
                </div>
                <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px;">    
                  <input type="color" name="favcolor" value="#ff0000" [(ngModel)]="geofenceColor">    
                </div>
              </div> 
              <div class="row" style="margin:0;margin-bottom:10px" *ngIf="btnTag === 'Create'">
                <!-- <p style="margin-bottom: 0px;">{{'Vehicles' | translate}}</p>
                <md-select multiple [(ngModel)]="selectedDevices" style="padding-top: 0;width: 90%;" ngDefaultControl>
                  <md-option type="checkbox" *ngFor="let item of poiDevices; let i = index;" [value]="item.id"
                    (click)="change(item, i)">{{item.deviceName}}</md-option>
                </md-select> -->
              <!-- <select id="dbselect" multiple="multiple">
                <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
              </select>
              {{options|json}} -->

              </div>    
              <div class="row" style="margin: 0;margin-top: 20px;">
                <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 0;">
                  <button style="background-color: #0e6cfb; color: white; float: right;" md-raised-button (click)="creategeo()">{{btnTag | translate}}</button>
                
                </div>
              </div>
    </div></div>
    </div>
    <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
      <div  id="map" style="width: 100%; height: 85vh"></div>
    </div>
  </div>
  </div> 






<!-- 
<app-all-menus></app-all-menus>



  <div class="small">
    <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;">
      <i class="material-icons">list</i>
    </button>
    <md-menu #menu="mdMenu">

      <a href="#">
        <h6>DASHBOARD
          <md-icon style="float:right">dashboard</md-icon>
        </h6>
      </a>


      <a href="#">
        <h6>RULES
          <md-icon style="float:right">dock</md-icon>
        </h6>
      </a>


    </md-menu>
  </div>

  <div style="float:left; width: 1%; height:86vh;overflow-y: hidden;
      overflow-x: hidden;">
    <div id="toast">
      <div id="desc">{{data_descip}}</div>
    </div>
  </div>
  <div style="float:left; width: 99%; padding-top: 6%;">
    <b>
      <h4 style="text-align:center;padding-top:1%">{{'Add Geo Fence' | translate}}</h4>
    </b>
    <table class="scroll" id="myTable" class="table table-striped ">
      <tbody>
        <tr style="width:100%">
          <td>
            <md-select style="display: grid;padding-top:11px;width:200px;" name="neww" placeholder="--{{'Select group' | translate}}--" [(ngModel)]="grp">
              <md-option *ngFor="let grp of grpName" [value]="grp">
                {{grp.name}}
              </md-option>
            </md-select>
          </td>
          <td>
            <md-select style="display: grid;padding-top:11px;width:200px;" name="neww" placeholder="--{{'Geofence type' | translate}}--" [(ngModel)]="geoT">
              <md-option *ngFor="let geoT of geoType" [value]="geoT">
                {{geoT}}
              </md-option>
            </md-select>
          </td>
          <td style="width:30%">
            <md-form-field class="example-full-width width" style="width:100%;float:left">
              <input mdInput class="no-spin" [(ngModel)]="geoname" name=" geoname" placeholder="--{{'GEO FENCE NAME' | translate}}--" required/>
              <md-error class="required">{{'Enter GEO FENCE NAME' | translate}}</md-error>
            </md-form-field>
          </td>
          <td style="width:15%">
            <p style="padding-top: 18%;">{{'Get Alert on' | translate}} :</p>
          </td>
          <td style="width:15%;padding-top: 19px;">
            <md-checkbox [(ngModel)]=" enter" style="float:left;padding-top: 8%;">{{'Entering' | translate}}</md-checkbox>
          </td>
          <td style="width:20%;padding-top: 19px;">
            <md-checkbox style="float:left;padding-top: 8%;" [(ngModel)]="exit">{{'Exiting' | translate}}</md-checkbox>
          </td>
          <td style="width:20%;padding-top: 19px;">
            <button style="width: 60%;cursor:pointer;margin-top: 4%;" class="btn btn-success" (click)="creategeo()">{{'Create' | translate}}</button>
          </td>
        </tr>
      </tbody>
    </table>
    <p style=float:left>{{'Select Your Geo Fence Region' | translate}} :</p>
    <br>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map" style="padding: 0px;width: 100%;display: flex;height: 57vh;"></div>
  </div>
 -->
