<app-main-header></app-main-header>
<app-enquirypopup-manager></app-enquirypopup-manager>
<div class="section">
  <div class="w100 sec-head">
    <div class="row">
      <div class="col-sm-8">
        <ul class="default top-menu">
          <li>
            <a [routerLink]="['/mytraining']">Home</a>
          </li>
          <li>
            <a class="active" [routerLink]="['/zonal-enquiry']">My Enquiry</a>
          </li>
        </ul>        
        <div class="monthly-det">
          <img src="assets/img/arrow_blue_left.png " (click)="decreasMonth()">
          <p>{{sales_date}}</p>
          <img  src="assets/img/arrow_blue_right.png" (click)="increasMonth()" />
        </div>
      </div>
      <!-- AM ROLE -->
      <div class="col-sm-12">
        <div class="manager-row row">
          <!-- <div class="col-sm-3" *ngIf="this.selecteduserrole!='7'">
            <div class="form-group dse-list">
              <label>ZM</label>
              <select class="form-control minimal" [(ngModel)]="selectedzm" (change)="selectrm($event)" required>
                <option *ngFor="let zm of zmlist;let i = index" [selected]="i==0" [value]="zm.smpin">
                  {{zm.smpin}}-{{zm.fname}} {{zm.lname}}</option>
              </select>
            </div>
          </div> -->
          <div class="col-sm-3" *ngIf="selecteduserrole!='7'">
            <div class="form-group dse-list">
              <label>RM</label>
              <select class="form-control minimal" [(ngModel)]="selectedrm" (change)="getamlist($event)" required>
                <option selected="selected"  value="">--ALL--</option>
                <option *ngFor="let zm of rmlist;let i = index"  [value]="zm.value">
                  {{zm.name}}</option>
              </select>
            </div>
          </div>

          <div class="col-sm-3" *ngIf="selecteduserrole!='7'">
            <div class="form-group dse-list">
              <label>AM</label>
              <select class="form-control minimal" [(ngModel)]="selectedam" (change)="getdealerlist($event)" required>
                <option selected="selected"  value="">--ALL--</option>
                <option *ngFor="let zm of amlist;let i = index"  [value]="zm.value">
                  {{zm.name}}</option>
              </select>
            </div>
          </div>

          <div class="col-sm-3">
            <div class="form-group dse-list">
              <label>Dealer</label>
              <select class="form-control minimal" [(ngModel)]="selecteddealer" (change)="getdselist($event)" required>
                <option selected="selected"  value="">--ALL--</option>
                <option *ngFor="let zm of dealerlist;let i = index"  [value]="zm.value">
                  {{zm.name}}</option>
              </select> 
            </div>
          </div>

          <div class="col-sm-3">
            <div class="form-group dse-list">
              <label>DSE</label>
              <select class="form-control minimal" [(ngModel)]="selecteddse" (change)="getdsedetails($event)" required>
                <option selected="selected"  value="">--ALL--</option>
                <option *ngFor="let zm of dselist;let i = index"  [value]="zm.smpin">
                  {{zm.smpin}}-{{zm.fname}} {{zm.lname}}</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- top-section -->
  <div class="top-section row">

    <div class="col-sm-8 col-12" *ngIf="loader">
      <div class="left_card">
        <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>
    </div>

    <div class="col-sm-8 col-12" *ngIf="!loader">
      <div class="box-type">
        <h5>ENQUIRIES</h5>
        <ul class="default clr-stat">
          <li>
            <div class="clr-box point" (click)="todaysTask('hot')">
              <span>HOT</span>
              <b>{{status_hot}}</b>
            </div>
          </li>
          <li>
            <div class="clr-box point" (click)="todaysTask('warm')">
              <span>WARM</span>
              <b>{{status_warm}}</b>
            </div>
          </li>
          <li>
            <div class="clr-box point" (click)="todaysTask('cold')">
              <span>COLD</span>
              <b>{{status_cold}}</b>
            </div>
          </li>
        </ul>
        <ul class="default enq-ul">
          <li>
            <div class="enq-detail point" (click)="todaysTask('testride')">
              <img src="assets/img/test-ride.png" alt="Testdrive">
              <p>
                <span>TEST RIDE</span>
                <b *ngIf="stage_testride != null">{{stage_testride}}</b>
                <b *ngIf="stage_testride == null">0</b>
              </p>
            </div>
          </li>
          <!-- <li>
            <div class="enq-detail point" (click)="todaysTask('booked')">
              <img src="assets/img/booked1.png" alt="Booked">
              <p>
                <span>Booked</span>
                <b *ngIf="this.stage_booked != null">{{stage_booked}}</b>
                <b *ngIf="this.stage_booked == null">0</b>
              </p>
            </div>
          </li>
          <li>
            <div class="enq-detail point" (click)="todaysTask('invoiced')">
              <img src="assets/img/invoiced.png" alt="Invoiced">
              <p>
                <span>Invoiced</span>
                <b *ngIf="this.stage_invoiced != null">{{stage_invoiced}}</b>
                <b *ngIf="this.stage_invoiced == null">0</b>
              </p>
            </div>
          </li> -->
          <li>
            <div class="enq-detail point" (click)="todaysTask('postponed')">
              <img src="assets/img/postponed.png" alt="Invoiced">
              <p>
                <span>POSTPONED</span>
                <b *ngIf="stage_postponed != null">{{stage_postponed}}</b>
                <b *ngIf="stage_postponed == null">0</b>
              </p>
            </div>
          </li>
          <li>
            <div class="enq-detail point" (click)="todaysTask('lost')">
              <img src="assets/img/lost.png" alt="Lost">
              <p>
                <span>LOST</span>
                <b *ngIf="stage_lost != null">{{stage_lost}}</b>
                <b *ngIf="stage_lost == null">0</b>
              </p>
            </div>
          </li>
          <li>
            <div class="enq-detail point" (click)="todaysTask('slot')">
              <img src="assets/img/slot.png" alt="Slot">
              <p>
                <span>SLOT AVAILABILITY</span>
                <!-- <b *ngIf="this.stage_lost != null">{{stage_lost}}</b>
                <b *ngIf="this.stage_lost == null">0</b> -->
              </p>
            </div>
          </li>
        </ul>
      </div>
      <div class="row">
        <div class="col-sm-4 col-12 booked">
          <div class="box-type">
            <ul class="default enq-ul">
              <li>
                <div class="enq-detail" >
                  <img src="assets/img/booked1.png" alt="Invoiced">
                  <p>
                    <span>BOOKED</span>
                    <b *ngIf="this.stage_booked != null">{{stage_booked}}</b>
                    <b *ngIf="this.stage_booked == null">0</b>
                </div>
              </li>
              <li>
                <div class="enq-detail">
                  <img src="assets/img/invoiced.png" alt="Invoiced">
                  <p>
                    <span>DELIVERED</span>
                    <b *ngIf="this.stage_delivered != null">{{stage_delivered}}</b>
                    <b *ngIf="this.stage_delivered == null">0</b>
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-sm-4 col-12">
          <div class="box-type point" (click)="salesDetail()">
            <h5>SALES</h5>
            <circle-progress [percent]="percentage_sales" [radius]="60" [space]="-10" [outerStrokeWidth]="10"
              [outerStrokeColor]="'#28a8e0'" [innerStrokeColor]="'#e7e8ea'" [innerStrokeWidth]="10" [title]="titlesales"
              [showSubtitle]="false" [animateTitle]="false" [animationDuration]="1500" [showUnits]="false"
              [showBackground]="false"></circle-progress>

            <p class="enq-txt">ACHIEVED SALES -{{month_sales_achieved}} / <BR> <span>{{month_sales_target}} TARGETED
                SALES</span></p>
          </div>
        </div>
        <div class="col-sm-4 col-12" (click)="Enquiry()">
          <div class="box-type point">
            <h5>ENQUIRIES</h5>
            <circle-progress [percent]="percentage_enquiry" [radius]="60" [space]="-10" [outerStrokeWidth]="10"
              [outerStrokeColor]="'#28a8e0'" [innerStrokeColor]="'#e7e8ea'" [innerStrokeWidth]="10"
              [title]="titleenquiry" [showSubtitle]="false" [animateTitle]="false" [animationDuration]="1500"
              [showUnits]="false" [showBackground]="false"></circle-progress>
            <p class="enq-txt">ACHIEVED ENQUIRIES - {{month_enquiry_achieved}} / <BR> <span>{{month_enquiry_target}}
                TARGETED ENQUIRIES</span></p>
          </div>
        </div>
      </div>
    </div>

    <app-taskstatus-manager style="width: 33%;"></app-taskstatus-manager>
  </div>
</div>






