<app-all-menus ></app-all-menus>
<div class="limiter" style="height: 100vh;">
  <div class="row rowStyle">
    <div class="col-12">
      <div class="row" style="background: grey;color: white;padding-top: 12px;padding-bottom: 5px;text-align: center;">
        <div class="col-12">
          <label>{{'Notification Center' | translate}}</label>
          <div id="toast">
            <div id="desc">{{data_descip}}</div>
          </div>
        </div>
      </div>
      <div class="row" style="background: #efecec;;height: 87vh;padding: 5vh;">
        <div class="col-7" style="background: white;border-right: 1px solid #2d4262;padding-left: 75px;padding-top: 30px;padding-right: 75px;">
          <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="col-4" >
              <p> {{'SELECT MODE' | translate}} <span style="color:red">*</span>:</p>
            </div>
            <div class="col-8">
              <md-radio-group [(ngModel)]="notificationType" aria-label="Select an option" (change)="changeValue($event)">
                <md-radio-button value="1" style="margin-right: 50px;">{{'Notification' | translate}}</md-radio-button>
                <md-radio-button value="2">{{'SMS'|translate}}</md-radio-button>
              </md-radio-group>
            </div>
          </div>

          <!-- ============================NEW INTEGRATION========================= -->
          <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="col-4">
              <p> {{'SEND TO' | translate}} <span style="color:red">*</span>:</p>
            </div>
            <div class="col-8">
              <md-radio-group [(ngModel)]="selectedRole" aria-label="Select an option" (change)="changeRole($event)">
                <md-radio-button value="dealer" style="margin-right: 10px;">{{'Dealers' | translate}}</md-radio-button>
                <md-radio-button value="directCustomer">{{'Direct Customer'|translate}}</md-radio-button>
                <md-radio-button value="dealersCustomer" style="margin-right: 10px;">{{"Dealer's Customer" | translate}}</md-radio-button>
                <md-radio-button *ngIf="supAdminDropDown == true" value="org" style="margin-right: 50px;">{{"DISTRIBUTER" | translate}}
                                </md-radio-button>
              </md-radio-group>
            </div>
          </div>

          <div *ngIf="supAdminDropDown == true && selectedRole=='org'" class="row" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="col-4" >
              <p> {{'DISTRIBUTER' | translate}} :</p>
            </div>
            <div class="col-8">
              <!-- <select id="distSelect" multiple="multiple" >
                <option *ngFor="let dist of distributers" [value]="dist._id" >{{ dist.first_name?dist.first_name:'' }}  {{ dist.last_name?dist.last_name:'' }}</option>
              </select> -->
              <md-input-container>
                <input mdInput placeholder="Search Distributer" [mdAutocomplete]="tdAutoedit" name="state" 
                #state="ngModel" [(ngModel)]="distributerValue" 
               (ngModelChange)="filterStates(distributerValue)" >
               <md-autocomplete #tdAutoedit="mdAutocomplete"  >
                  <md-option *ngFor="let dist of distributerSelect" [value]="dist.user_type" >
                    <span>{{ dist.user_type }}</span>
                  </md-option>
                </md-autocomplete>   
              </md-input-container>
            </div>
          </div>
          <div *ngIf="dealeDropDown == true && selectedRole=='dealersCustomer' || selectedRole=='org'" class="row" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="col-4" >
              <p> {{'DEALER' | translate}} :</p>
            </div>
            <div class="col-8">
              <!-- <select id="dealerSelect" multiple="multiple" onchange="changedUser(dlr, 'dealer')">
                <option *ngFor="let dlr of dealers" [value]="dlr._id">{{ dlr.first_name?dlr.first_name:'' }}  {{ dlr.last_name?dlr.last_name:'' }}</option>
              </select> -->
              <md-input-container>
                <input mdInput placeholder="Search Dealer" [mdAutocomplete]="tdAutoedit" name="state" 
                #state="ngModel" [(ngModel)]="dealerValue" 
               (ngModelChange)="filterStatesdelaer(dealerValue)" >
               <md-autocomplete #tdAutoedit="mdAutocomplete" >
                  <md-option *ngFor="let dist of DealerSelect" [value]="dist.user_type">
                    <span>{{ dist.user_type }}</span>
                  </md-option>
                </md-autocomplete>   
              </md-input-container>
            </div>
          </div>
          <!-- <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="col-4" >
              <p> CUSTOMER :</p>
            </div>
            <div class="form-group col-8">
            </div>
          </div> -->
          <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="col-4" >
              <p> {{'TITLE'| translate}}<span style="color:red">*</span> :</p>
            </div>
            <div class="col-8">
              <input type="text" class="form-control" id="messageTitle" [(ngModel)]="msgTitle" aria-describedby="point" placeholder="{{'Type subject here' | translate}}" >
            </div>
          </div>
          <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
            <div class="col-4" >
              <p> {{'MESSAGE' | translate}} <span style="color:red">*</span>:</p>
            </div>
            <div class="col-8">
              <textarea type="textarea" style="height:150px" class="form-control" id="msgcntnt" [(ngModel)]="msgContent" aria-describedby="point" placeholder="{{'Type Message here' | translate}}"></textarea>
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <button md-raised-button style="float:right;background: #2C7873; color: white;font-size: 14px;margin-left: 10px;border-radius:0px;" (click)="messageSend()" > {{'SEND' | translate}} </button>
              <button md-raised-button style="float:right;background: #b11515;; color: white;font-size: 14px;border-radius:0px;" > {{'RESET' | translate}} </button>          
             
            </div>
          </div>
        </div>
        <div class="col-5" style="background: white;padding-left: 75px;padding-top: 30px;padding-right: 75px;">
          <div style="width: 100%;">
            <table id="deviceTable" cellspacing="0" class="table-wrap" >
                <thead style="background: #2d4262;color:white;">
                    <tr>
                        <th style="text-align:left;padding-left: 10px;"><input type="checkbox" id="mass_select_all" class="editor-active"></th>
                        <th style="text-align:left;">{{'Name' | translate}}</th>
                        <th style="text-align:left;">{{'Phone' | translate}}</th>
                    </tr>
                </thead> 
            </table>
        </div> 
        </div>
      </div>  
    </div>
  </div>
</div>