<app-main-header></app-main-header>
<app-confirm-popup (sendCount)='sendtolist($event)'></app-confirm-popup>
<div class="section task-section">
  <div class="top-section row">

    <div class="w100 col-sm-12 row">
      <div class="col-sm-5">
        <p class="back" (click)="backactionhistory()">
          <img src="assets/img/arrow_blue_left.png "> BACK
        </p>
      </div>
      <div class="col-sm-3">
        <div class="monthly-det">
          <img src="assets/img/arrow_blue_left.png ">
          <p>{{sales_date}}</p>
          <img src="assets/img/arrow_blue_right.png">
        </div>
      </div>
      <div class="col-sm-4 p0">
        <button class="btn btns blue" (click)="createtestride()">CREATE ENQUIRY</button>
      </div>
    </div>

    <div class="col-sm-8 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>
      <div class="w100 sec-head">
        <ul class="default top-menu">
          <li>
            <a routerLink="/action-history" routerLinkActive="active">Action History</a>
          </li>
          <li>
            <a routerLink="/enquiry-profile" routerLinkActive="active"> Enquiry Profile</a>
          </li>
        </ul>
      </div>

      <div class="top-section w100" *ngIf="!loader">
        <div class="box-type task-left">
          <div class="action">
            <div class="col-sm-12">
              <div class="row">
                <div class="col-sm-6">
                  <div class="col-left">
                    <h4>{{enquirydata.first_name}}</h4>
                    <p>Enquiry ID: <span>{{enquirydata.enq_num}}</span></p>
                    <p>Model Name: <span>{{enquirydata.variant_name}}</span></p>
                    <h4 class="throug"> Enquired Through
                      <span *ngIf="enquirydata.enq_through == 'Star App'" class="star">{{enquirydata.enq_through}}
                        <img src="assets/img/icon_logo.png" alt="Star App">
                      </span>
                      <span *ngIf="enquirydata.enq_through == 'DMS'" class="dms">{{enquirydata.enq_through}}
                        <img src="assets/img/Icon_DMS.png" alt="DMS">
                      </span>
                    </h4>
                  </div>
                </div>
                <div class="col-sm-6 pad0 history-right">
                  <!-- <span class="starus">{{enquirydata.enquiry_str}}</span> -->
                  <!-- <span class="status"  *ngIf="enquirydata.status=='H'">Hot</span>
                  <span class="status warm"  *ngIf="enquirydata.status == 'W'">Warm</span>.status.warm{
                    background: #3AB54B;
                }
                .status.cold{
                    background: #F6941C;
                }
                  <span class="status cold"  *ngIf="enquirydata.status == 'P'">Cold</span> -->
                  <span class="starus" *ngIf="enquirydata.status=='H'">Hot</span>
                  <span class="starus warm" *ngIf="enquirydata.status == 'W'">Warm</span>
                  <span class="starus cold" *ngIf="enquirydata.status == 'P'">Cold</span>
                  <span class="starus post" *ngIf="enquirydata.status == 'E'">Postponed</span>
                  <span class="starus lost" *ngIf="enquirydata.status == 'L'">Lost</span>
                  <div class="col-right">
                    <div class="follow-up">

                      <p>Next Follow up:
                        <span *ngIf="enquirydata.newvechicledate != ''">{{enquirydata.newvechicledate |date: 'dd-MMM-yyy'}}</span>
                      </p>
                      <p>Created Date:
                        <span *ngIf="enquirydata.created_on != ''">{{enquirydata.created_on |date: 'dd-MMM-yyy'}}</span>
                      </p>
                      <p>Mobile: <span>{{enquirydata.custmobile}}</span></p>
                    </div>
                    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                      xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 513.64 513.64"
                      style="enable-background:new 0 0 513.64 513.64;" xml:space="preserve">
                      <g>
                        <g>
                          <path d="M499.66,376.96l-71.68-71.68c-25.6-25.6-69.12-15.359-79.36,17.92c-7.68,23.041-33.28,35.841-56.32,30.72
                                c-51.2-12.8-120.32-79.36-133.12-133.12c-7.68-23.041,7.68-48.641,30.72-56.32c33.28-10.24,43.52-53.76,17.92-79.36l-71.68-71.68
                                c-20.48-17.92-51.2-17.92-69.12,0l-48.64,48.64c-48.64,51.2,5.12,186.88,125.44,307.2c120.32,120.32,256,176.641,307.2,125.44
                                l48.64-48.64C517.581,425.6,517.581,394.88,499.66,376.96z" />
                        </g>
                      </g>

                    </svg>
                  </div>

                </div>
              </div>
            </div>
          </div>
          <div class="action_list">

            <div class="history w100">
              <div class="steps success" *ngFor="let slist of enquirylist">
                <div class="imgcircle" [style.background-color]="slist.colorcode">
                </div>
                <span class="line" [style.background-color]="slist.colorcode"></span>
                <p>{{slist.title}}</p>
                <p>
                  <span *ngIf="slist.status!=''">Status: <b>{{slist.status}}</b></span>
                  <span *ngIf="slist.stage!=''">Stage: <b>{{slist.stage}}</b></span>
                  <span *ngIf="slist.type!=''">Type: <b>{{slist.type}}</b></span>
                </p>
                <span class="cnt" *ngIf="slist.remarks!=''">Remarks: <b>{{slist.remarks}}</b></span>
                <span class="cnt" *ngIf="slist.remarks==''">Remarks: <b>-</b></span>
                <i>Date: {{slist.created_on_str}}</i>
              </div>
            </div>

            <div class="w100 mb20 text-center" *ngIf="statuscheckvalue !='L'">
              <button class="btn btns" data-target="#follow-modal" (click)="updateclick()"
                data-toggle="modal">Update</button>
            </div>

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

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


<!-- Follow Up Modal -->
<div class="modal fade" id="follow-modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
  <form [formGroup]="followupform">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">

        <div class="modal-body">
          <div class="row">
            <div class="col-sm-12">
              <h5>Follow Up </h5>
            </div>

            <div class="col-sm-12">
              <div class="form-group m0">
                <label>Select status</label>
              </div>
            </div>

            <div class="col-sm-12">
              <div class="form-group schl-btn">
                <button class="btn btns hot" [ngClass]="{'hot_active': statuscheck === 'H'}"
                  (click)="statusclick('hot')">HOT</button>
                <button class="btn btns warm" [ngClass]="{'warm_active': statuscheck === 'W'}"
                  (click)="statusclick('warm')">WARM</button>
                <button class="btn btns cold" [ngClass]="{'cold_active': statuscheck === 'P'}"
                  (click)="statusclick('cold')">COLD</button>
                  <button class="btn btns post" [ngClass]="{'post_active': statuscheck === 'E'}"
                  (click)="statusclick('postponed')">POSTPONED</button>
                <button class="btn btns lost " [ngClass]="{'lost_active': statuscheck === 'L'}"
                  (click)="statusclick('lost')">LOST</button>
              </div>
            </div>

            <div class="col-sm-6" [ngClass]="{'col-sm-12': statuscheck=='E'}"
            *ngIf="statuscheck == 'L' || statuscheck == 'E'">
             <div class="form-group">
               
               <label *ngIf="statuscheck == 'L'">Lost Reason </label>
               <label *ngIf="statuscheck == 'E'">Postponed Reason </label>
               <select class="form-control" formControlName="reason" (change)="selectreason($event.target.value)">
                 <option selected="selected" disabled="disabled" value="">--Select--</option>
                 <option *ngFor="let zm of selectedtypearr" [value]="zm.title_code">{{zm.title}}</option>
               </select>
             </div>
             <div class="color_error shake" *ngIf="followupform.controls['reason'].value =='' && submittedvalue && (statuscheck=='L' || statuscheck=='E')  ">
                 <a class="text-left shake">
                   <img src="assets/img/error.png" />Please select a reason</a>
               </div>
           </div>
           
            <div class="col-sm-12" *ngIf="statuscheck !='L'">
              <div class="form-group">
                <label>Next Follow Up</label>
                <select class="form-control" formControlName="modeofcontact"
                  (change)="selectpurpose($event.target.value)" >
                  <option selected="selected" disabled="disabled" value="">--Select--</option>
                  <option *ngFor="let zm of purposearr" [value]="zm.title_code">{{zm.title}}</option>
                </select>
              </div>
              <div class="color_error shake" *ngIf="statuscheck !='L' && followupform.controls['modeofcontact'].value =='' && submittedvalue">
                <a class="text-left shake">
                  <img src="assets/img/error.png" />Please select next follow up</a>
              </div>
            </div>

            
            <div class="col-sm-12" *ngIf="statuscheck !='L'">
              <div class="form-group">

                <label>Mode of Contact</label>
                <select class="form-control" formControlName="nextfollowup"
                  (change)="selectmodeofcontact($event.target.value)" >
                  <option selected="selected" disabled="disabled" value="">--Select--</option>
                  <option *ngFor="let zm of modeofcontactarr" [value]="zm.title_code">{{zm.title}}</option>
                </select>
              </div>
              <div class="color_error shake" *ngIf="followupform.controls['nextfollowup'].value =='' && submittedvalue ">
                <a class="text-left shake">
                  <img src="assets/img/error.png" />Please select mode of contact </a>
              </div>
            </div>
         

          

              <div class="col-sm-6" *ngIf="statuscheck == 'L'">
                <div class="form-group">
                  <label>Sub Reason</label>
                  <select class="form-control" formControlName="subreason" (change)="selectsubreason($event.target.value)">
                    <option selected="selected" disabled="disabled" value="">--Select--</option>
                    <option *ngFor="let zm of subreasonarr" [value]="zm.title_code">{{zm.title}}</option>
                  </select>
                </div>
                <div class="color_error shake" *ngIf="followupform.controls['subreason'].value =='' && submittedvalue &&  statuscheck=='L'   ">
                  <a class="text-left shake">
                    <img src="assets/img/error.png" />Please select a sub reason</a>
                </div>
            </div>

            <div class="col-sm-6" *ngIf="statuscheck == 'L' && (followupform.controls['reason'].value =='MR1'||followupform.controls['reason'].value =='MR2') ">
              <div class="form-group">
                <label>Dealer</label>
                <input type="text" class="form-control" placeholder="Enter Dealer Name" formControlName="dealervalue">
              </div>
              <div class="color_error shake" *ngIf="followupform.controls['dealervalue'].value ==''">
                <a class="text-left shake">
                  <img src="assets/img/error.png" />Please enter a dealer</a>
              </div>
            </div>

              <div class="col-sm-6" *ngIf="statuscheck == 'L' && (followupform.controls['reason'].value =='MR1'||followupform.controls['reason'].value =='MR2') ">
                <div class="form-group">
                  <label>Model</label>
                  <select class="form-control" formControlName="allmodel" required>
                    <option selected="selected" disabled="disabled" value="">--Select--</option>
                    <option *ngFor="let zm of lostmodelarr" [value]="zm.title_code">{{zm.title}}</option>
                  </select>
                </div>
                <div class="color_error shake" *ngIf="followupform.controls['allmodel'].value ==''">
                  <a class="text-left shake">
                    <img src="assets/img/error.png" />Please select mode of contact</a>
                </div>
            </div>
            <div class="col-sm-6 float-left" *ngIf="statuscheck != 'L'">            
              <div class="form-group sch_date">
                <label>Schedule Date</label>
                <ng-datepicker formControlName="followupdatefm" [(ngModel)]="followupdate" [options]="options"
                  name="followupdate" class="form-control custom-date"></ng-datepicker>
              </div>
            </div>

            <div class="col-sm-6 float-left" *ngIf="statuscheck != 'L'">
              <div class="form-group">
                <label>Time</label>
                <select class="form-control" formControlName="timeval" (change)="selecttime($event.target.value)"
                  required>
                  <option selected="selected" disabled="disabled" value="">--Select--</option>
                  <option *ngFor="let zm of timearr" [value]="zm.title_code">{{zm.title}}</option>
                </select>
              </div>
              <div class="color_error shake" *ngIf="followupform.controls['timeval'].value =='' && submittedvalue  ">
                <a class="text-left shake">
                  <img src="assets/img/error.png" />Please select time</a>
              </div>
            </div>




            <div class="col-sm-12">
              <div class="form-group">
                <label>Remarks</label>
                <textarea placeholder="Write Remarks" class="form-control" formControlName="remarks"></textarea>
              </div>
              <!-- <div class="color_error shake top_86" *ngIf="followupform.controls['remarks'].invalid && submittedvalue  ">
                <a class="text-left shake">
                  <img src="assets/img/error.png" />Please enter remarks</a>
              </div> -->
            </div>




            <div class="col-sm-12 mt20 text-center">
              <button class="btn btns" (click)="clear_insert()" data-dismiss="modal">Cancel</button>
              <button class="btn btns" *ngIf="submittedvalue == false"  (click)="insertfollowup()">Submit</button>
              <button class="btn btns" *ngIf="submittedvalue == true" disabled  >Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>