<app-main-header></app-main-header>
<!-- AM RM ZM ROLE -->
<div class="col-sm-12">

    <div class="manager-row row">
      <div class="col-sm-3" *ngIf="setzmselectednameobj !=''">
        <div class="form-group dse-list">
            <label>ZM: {{setzmselectednameobj}}</label>
        </div>
    </div>

    
    <div class="col-sm-3" *ngIf="setrmselectednameobj !=''">
      <div class="form-group dse-list">
        <label>RM: {{setrmselectednameobj}}</label>
      </div>
    </div>

    <div class="col-sm-3" *ngIf="setamselectednameobj !=''">
      <div class="form-group dse-list">
        <label>AM: {{setamselectednameobj}}</label>
      </div>
    </div>

    <div class="col-sm-3" *ngIf="setdealerselectednameobj !=''">
      <div class="form-group dse-list">
        <label>Dealer: {{setdealerselectednameobj}}</label>
      </div>
    </div>

    <div class="col-sm-3" *ngIf="setdseselectednameobj !=''">
      <div class="form-group dse-list">
        <label>DSE: {{setdseselectednameobj}}</label>
      </div>
    </div>

  </div>

</div>

<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>

    <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="/manager-action-history" routerLinkActive="active">Action History</a>
          </li>
          <li>
            <a routerLink="/manager-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"> Created 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.mobile}}</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="table-responsive enquiry_table">
              <table class="table table-bordered">
                <tr>
                  <td>Mobile No</td>
                  <td>{{enquirydata.mobile}}</td>
                </tr>
                <tr>
                  <td>First Name</td>
                  <td>{{enquirydata.first_name}}</td>
                </tr>
                <tr>
                  <td>Sur Name</td>
                  <td>{{enquirydata.last_name}}</td>
                </tr>
                <tr>
                  <td>Email ID</td>
                  <td>{{enquirydata.email}}</td>
                </tr>
                <tr>
                  <td>Model</td>
                  <td><img src="{{enquirydata.model_image_url}}" width='50px'>{{enquirydata.model_name}}</td>
                </tr>
                <tr>
                  <td>Varient</td>
                  <td>{{enquirydata.variant_name}}</td>
                </tr>
                <tr>
                  <td>Colour</td>
                  <td>{{enquirydata.color_name}}</td>
                </tr>
              
                <tr>
                  <td>Source</td>
                  <td>{{enquirydata.source_str}}</td>
                </tr>
                <tr>
                  <td>Profession</td>
                  <td>{{enquirydata.profession_str}}</td>
                </tr>
                <tr>
                  <td>Age Group</td>
                  <td>{{enquirydata.agegroup_str}}</td>
                </tr>
              </table>
            </div>


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

    </div>

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


<!-- Follow Up Modal -->
<div class="modal fade" id="follow-modal" tabindex="-1" role="dialog" data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">

      <div class="modal-body">
        <form class="row custom-form">
          <div class="col-sm-12">
            <h5>Follow Up </h5>
          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <label>Remarks</label>
              <textarea placeholder="Write Remarks" class="form-control"></textarea>
            </div>
          </div>

          <div class="col-sm-12">
            <div class="form-group">
              <label>Next Follow Up</label>
              <select class="form-control">
                <option>Callback</option>
                <option>Callback</option>
                <option>Callback</option>
              </select>
            </div>
          </div>

          <div class="col-sm-12">
            <div class="form-group">
              <label>Mode of Contact</label>
              <select class="form-control">
                <option>Callback</option>
                <option>Callback</option>
                <option>Callback</option>
              </select>
            </div>
          </div>

          <div class="col-sm-12">
            <div class="form-group m0">
              <label>Schedule Date / Time</label>
            </div>
          </div>

          <div class="col-sm-6">
            <div class="form-group">
              <input type="date" placeholder="00/00/0000" class="form-control">
            </div>
          </div>

          <div class="col-sm-6">
            <div class="form-group">
              <select class="form-control">
                <option>select time</option>
              </select>
            </div>
          </div>

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

          <div class="col-sm-12">
            <div class="form-group schl-btn">
              <button class="btn btns hot">HOT</button>
              <button class="btn btns warm">WARM</button>
              <button class="btn btns cold">COLD</button>
            </div>
          </div>


          <div class="col-sm-12 mt20 text-center">
            <button class="btn btns" data-dismiss="modal">Cancel</button>
            <button class="btn btns">Submit</button>
          </div>

        </form>
      </div>

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