<app-main-header></app-main-header>
<app-toaster-container></app-toaster-container>
<div class="section task-section">
  <div class="top-section row">
    <div class="col-sm-12">
      <h4 class="head">MY DSE LIST</h4>
      <!-- <div class="form-group dse-list">
        <label _ngcontent-c20="">DSE :</label>
        <div class="form-control">
          {{this.smpinselected}}-{{this.smpinselectedname}}
        </div>
      </div> -->
    </div>
    <div class="col-sm-12 col-12">
      <div class="left_card" *ngIf="loader">
        <div class="inner_load inner_edit-load">
          <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
            <path fill="#28a8e0"
              d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
              <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50"
                to="360 50 50" repeatCount="indefinite" />
            </path>
          </svg>
          <p>Just a moment...</p>
        </div>
      </div>
      <p class="note">Note: DSE marked Inactive using this functionality will restrict <b>only</b> STAR App usage. Further you have to <b>Remove</b> DSE from DMS immediately as per process.</p>
      <div class="box-type task-left" *ngIf="!loader">
        <div class="row">
          <div class="col-sm-8">
            <p class="back" routerLink="/dealer-myenquiries">
                <img src="assets/img/arrow_blue_left.png "> BACK
            </p>
          </div>
          <div class="col-sm-4">
            <h5>Dealer Name: {{dsename}}-{{dsecityvalue}}</h5>
          </div>
        </div>
          
        <!-- <div class="select_model">
          <div class="form-group">
            <label>Select Model</label>
            <select class="form-control" [(ngModel)]="modelselected" (change)="selectmodel($event.target.value)"
              required>
              <option selected="selected" disabled="disabled" value="">--Select--</option>
              <option *ngFor="let zm of modelarr" [value]="zm.title_code">{{zm.title}}</option>
            </select>
          </div>
        </div> -->

        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <td>PROFILE</td>
                <td>NAME</td>
                <td>ACTIVE / INACTIVE</td>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let slist of pricedata">
                <td *ngIf="slist.profile_photo !=''">
                  <img src="{{slist.profile_photo}}" width="60" alt="Image">
                </td>
                <td *ngIf="slist.profile_photo ==''">                 
                  <img src="assets/img/No-image.png" width="60" alt="Image">
                </td>
                <td>
                    {{slist.smpin}} - {{slist.fname}} {{slist.lname}}
                </td>
                <td>  
                  <div class="btn-group act" role="group" aria-label="Basic example" *ngIf="slist.userstatus =='1'">
                      <button type="button"  [ngClass]= "{'fullred':slist.userstatus=='1'}" >Active</button>
                    <button type="button"  class="btn btn-secondary" (click)="changetoinactivestatus(slist)"  data-toggle="modal" data-target="#remarksModal" >Inactive</button> 
                  </div>
                  <div class="btn-group act" role="group" aria-label="Basic example" *ngIf="slist.userstatus == '2' && slist.userstatus !='1' && slist.userstatus !='0'">
                    <!-- <button type="button"  class="btn btn-secondary" (click)="changestatus(slist)">Active</button>  -->
                    <button type="button"  class="btn btn-secondary" disabled>Active</button> 
                    <button type="button"  [ngClass]= "{'fullreddeactive':slist.userstatus=='2' && slist.userstatus !='1' && slist.userstatus !='0'}"   >Inactive</button>
                  </div>
                  <div class="btn-group act" role="group" aria-label="Basic example" *ngIf="slist.userstatus =='0' && slist.userstatus !='1' && slist.userstatus !='2'">
                    <div>
                      Not Registered
                    </div>
                  </div>
                </td>
              </tr>
              <tr *ngIf="pricedata.length ==0">
                <td colspan="3">
                  Select a Dealer
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- <div class="model_price">
          <div class="table-responsive">
            <table class="table">
              <thead>
                <tr>
                  <td>S.No</td>
                  <td>NAME</td>
                  <td>ACTIVE / INACTIVE</td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>001</td>
                  <td>Anderson</td>
                  <td>
                    <div class="btn-group act" role="group" aria-label="Basic example">
                      <button type="button" class="btn btn-secondary active">Active</button>
                      <button type="button" class="btn btn-secondary">Inactive</button>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>002</td>
                  <td>Peter</td>
                  <td>
                    <div class="btn-group act" role="group" aria-label="Basic example">
                      <button type="button" class="btn btn-secondary">Active</button>
                      <button type="button" class="btn btn-secondary active">Inactive</button>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>003</td>
                  <td>Peter</td>
                  <td>
                    <div class="btn-group act" role="group" aria-label="Basic example">
                      <button type="button" class="btn btn-secondary active">Active</button>
                      <button type="button" class="btn btn-secondary">Inactive</button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

        </div> -->
      </div>

    </div>
    <!-- <div class="col-sm-4 col-12 task-right">
      <app-taskstatus-dealer></app-taskstatus-dealer>
    </div> -->
  </div>
</div>

<div class="modal fade" id="remarksModal" tabindex="-1" role="dialog" aria-hidden="true" data-keyboard="false" >
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Are you sure! Do you want to De-activate?​</h5>
        <!-- <h5 class="modal-title">Activate - {{tempvalueobj.smpin}} {{tempvalueobj.fname}} {{tempvalueobj.lname}}</h5> -->
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <label for="message-text"  class="col-form-label" *ngIf="tempvalueobj !=''" >( {{tempvalueobj.smpin}}-{{tempvalueobj.fname}} {{tempvalueobj.lname}} )</label>   
        <div class="form-group">
          <label for="message-text"  class="col-form-label">Reason:</label>
          <select class="form-control" [(ngModel)]="remarkoption" (change)="remarkschange()">
            <option value="" selected>Select</option>
            <option *ngFor="let zm of modelarr" [value]="zm.id">{{zm.name}}</option>
          </select>
        </div>
        <div class="form-group" *ngIf="remarkoption =='0'">
          
          <label for="message-text" class="col-form-label">Remarks:</label>
          <textarea class="form-control" id="message-text" [(ngModel)]="remarks"  
          placeholder="Enter Remarks"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button (click)="changestatus()" *ngIf="submittedvalue == false" type="button" class="btn btn-primary">Submit</button>
        <button  type="button" *ngIf="submittedvalue == true"  disabled class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</div>