<app-main-header></app-main-header>
<app-enquirypopup-dealer></app-enquirypopup-dealer>
<div class="section task-section">
    <div class="top-section row">

        <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" *ngIf="!loader">
                <div class="row">
                    <div class="col-sm-9">
                        <p class="back" routerLink="/dealer-myenquiries">
                            <img src="assets/img/arrow_blue_left.png "> BACK
                        </p>
                        <div class="form-group dse-list">
                            <label _ngcontent-c20="">DSE: {{this.smpinselectedname}}</label>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="monthly-det" *ngIf="tempobj !='datevalentered'">
                            <p><b>{{displaytitle}}'S TASK</b></p>
                        </div>
                        <div class="monthly-det" *ngIf="tempobj =='datevalentered'">
                            <p><b>CUSTOMIZED DATE</b></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="box-type task-left" *ngIf="!loader">

                <div class="row">
                    <div class="col-sm-8">
                        <!-- <h5 class="tit">{{task_name}}</h5> -->
                        <ul class="default top-menu" *ngIf="displaytitle=='TODAY'">
                            <li>
                                <a [ngClass]="displayactivetoday_visit==true ? 'active':''" (click)="todaysTask('today-visit')">Personal Visit</a>
                            </li>
                            <li>
                                <a [ngClass]="displayactivetoday_ride==true ? 'active':''" (click)="todaysTask('today-testride')">Test Ride</a>
                            </li>
                            <li>
                                <a [ngClass]="displayactivetoday_call==true ? 'active':''" (click)="todaysTask('today-call')"> Call</a>
                            </li>

                        </ul>

                        <ul class="default top-menu" *ngIf="displaytitle=='TOMORROW'">
                            <li>
                                <a [ngClass]="displayactivetomorrow_visit==true ? 'active':''" (click)="todaysTask('tomorrow-visit')">Personal Visit</a>
                            </li>
                            <li>
                                <a [ngClass]="displayactivetomorrow_ride==true ? 'active':''" (click)="todaysTask('tomorrow-testride')">Test Ride</a>
                            </li>
                            <li>
                                <a [ngClass]="displayactivetomorrow_call==true ? 'active':''" (click)="todaysTask('tomorrow-call')"> Call</a>
                            </li>

                        </ul>


                        <ul class="default top-menu" *ngIf="displaytitle=='PENDING'">
                            <li>
                                <a [ngClass]="displayactivepending_visit==true ? 'active':''" (click)="todaysTask('pending-visit')">Personal Visit</a>
                            </li>
                            <li>
                                <a [ngClass]="displayactivepending_ride==true ? 'active':''" (click)="todaysTask('pending-testride')">Test Ride</a>
                            </li>
                            <li>
                                <a [ngClass]="displayactivepending_call==true ? 'active':''" (click)="todaysTask('pending-call')"> Call</a>
                            </li>

                        </ul>

                        <ul class="default top-menu" *ngIf="displaytodayblock==true">
                            <li>
                                <a [ngClass]="daytask_today==true ? 'active':''" (click)="daytask('today')">Today</a>
                            </li>
                            <li>
                                <a [ngClass]="daytask_tomorrow==true ? 'active':''" (click)="daytask('tomorrow')">Tomorrow</a>
                            </li>
                            <li class="my-date" (click)="daytaskdateval()">
                                <div class="form-group my-date training-date lead_update">
                                    <ng-datepicker [ngClass]="daytask_customdate==true ? 'date-active':''" [(ngModel)]="followupdate" class="followupdate" [options]="options" name="followupdate" class="form-control custom-date"></ng-datepicker>
                                </div>
                                <button class="btn btns blue" (click)="calulatedatebased()">Go</button>
                                <!-- <a [ngClass]="daytask_customdate==true ? 'active':''" ></a> -->
                            </li>
                        </ul>

                    </div>


                    <div class="col-sm-4">
                        <div class="form-group search">
                            <input type="search" placeholder="Search" class="form-control">
                            <button class="btn btns blue">Go</button>
                        </div>
                    </div>
                </div>

                <ul class="default task_ul">

                    <li *ngFor="let slist of taskslist| paginate:{itemsPerPage: page_per_size, currentPage: activePage, totalItems: total_item }; let i=index;">
                        <div class="w100" (click)="sendfollowupdetails(slist)">
                            <div class="left-task">
                                <span class="status" *ngIf="slist.status=='H'">Hot</span>
                                <span class="status warm" *ngIf="slist.status == 'W'">Warm</span>
                                <span class="status cold" *ngIf="slist.status == 'P'">Cold</span>
                                <span class="status lost" *ngIf="slist.status == 'L'">Lost</span>
                                <span class="status postponed" *ngIf="slist.status == 'E'">Post</span>
                                <div class="circle" *ngIf="slist.icon_type=='0'">
                                    <img src="assets/img/Icon_Others.png" alt="Others">
                                    <!-- <p>Others</p> -->
                                </div>
                                <div class="circle" *ngIf="slist.icon_type=='1'">
                                    <img src="assets/img/test-ride.svg" alt="Test Ride">
                                    <!-- <p>Test Ride</p> -->
                                </div>
                                <div class="circle" *ngIf="slist.icon_type=='2'">
                                    <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 460.713 460.713" style="enable-background:new 0 0 460.713 460.713;" xml:space="preserve">
                <g id="XMLID_241_">
                  <path id="XMLID_244_" d="M344.09,407.04l0.085,30.218c0.037,12.968,10.56,23.455,23.52,23.455c0.022,0,0.046,0,0.068,0
                    c12.991-0.037,23.492-10.598,23.455-23.588l-0.085-30.085H344.09z"/>
                  <path id="XMLID_1025_" d="M286.488,401.022l-0.003,36.167c-0.001,12.991,10.529,23.522,23.52,23.523c0.001,0,0.001,0,0.002,0
                    c12.989,0,23.521-10.53,23.521-23.52l0.002-30.154h-29.941C297.124,407.04,291.178,404.783,286.488,401.022z"/>
                  <circle id="XMLID_1026_" cx="91.124" cy="40.624" r="40.624"/>
                  <path id="XMLID_1027_" d="M192.368,165.43l-61.55-7.221l-40.252-39.995l38.18,20.017l14.077,1.651v-17.387
                    c0-15.156-12.286-27.443-27.443-27.443H66.441c-15.156,0-27.443,12.287-27.443,27.443l-0.483,314.63
                    c-0.037,12.99,10.464,23.551,23.455,23.588c0.023,0,0.045,0,0.068,0c12.959,0,23.483-10.487,23.52-23.455l0.492-173.897
                    c0-0.022-0.001-0.044-0.001-0.066h10.144l0.013,173.899c0.001,12.99,10.533,23.521,23.523,23.52
                    c12.99-0.001,23.521-10.533,23.52-23.523c-0.016-209.227-0.427-218.365-0.427-218.365l-25.583-3.001
                    c-7.824-0.918-17.436-0.732-23.064-11.127l-31.242-58.674l45.057,44.77c3.113,3.093,7.174,5.052,11.532,5.563l68.277,8.01
                    c10.763,1.261,20.491-6.442,21.751-17.184C210.813,176.43,203.12,166.691,192.368,165.43z"/>
                  <circle id="XMLID_1028_" cx="338.61" cy="40.624" r="40.624"/>
                  <path id="XMLID_1031_" d="M411.805,301.04h-20.546c0-12.415,0-14.571,0-29.04c0-5.523-4.477-10-10-10h-3.113
                    c1.118-6.961,8.603-53.567,9.796-60.998c0.521-3.24,0.219-6.558-0.876-9.651l-23.209-65.535l1.393,2.07l25.486,37.881v-43.272
                    c0-15.156-12.287-27.443-27.443-27.443h-48.939c-15.156,0-27.443,12.287-27.443,27.443v6.973l-62.828,35.914
                    c4.049,7.041,5.955,15.396,4.936,24.083c-1.298,11.068-7.095,20.507-15.342,26.726c0.96-0.363,1.906-0.796,2.826-1.321
                    l70.407-40.247l-0.415,115.427c8.253-6.611,16.414-6.01,20.638-6.01V272c0-10.578,6.193-20.022,15.503-24.423l8.934-55.628
                    l-3.581-40.807l-1.086-12.237l21.539,60.819c-1.038,6.461-8.841,55.048-10.001,62.276h-4.307c-5.523,0-10,4.477-10,10
                    c0,14.346,0,16.709,0,29.04h-20.545c-5.74,0-10.392,4.653-10.392,10.392v68.215c0,5.74,4.653,10.392,10.392,10.392h108.215
                    c5.74,0,10.392-4.653,10.392-10.392v-68.215C422.197,305.693,417.544,301.04,411.805,301.04z M354.141,287.858
                    c1.053,0.169,2.099,0.251,3.132,0.251c4.406,0,8.556-1.504,11.899-4.07h2.086v17h-27.124v-17h1.155
                    C347.793,285.97,350.8,287.322,354.141,287.858z"/>
                </g>
                  </svg>
                                    <!-- <p>Visit</p> -->
                                </div>
                                <div class="circle" *ngIf="slist.icon_type=='3'">
                                    <svg _ngcontent-c1="" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" id="Capa_1" style="enable-background:new 0 0 348.077 348.077;" version="1.1" viewBox="0 0 348.077 348.077" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
                                                      <g _ngcontent-c1="">
                                                          <g _ngcontent-c1="">
                                                              <g _ngcontent-c1="">
                                                                  <path _ngcontent-c1="" d="M340.273,275.083l-53.755-53.761c-10.707-10.664-28.438-10.34-39.518,0.744l-27.082,27.076
                                                      c-1.711-0.943-3.482-1.928-5.344-2.973c-17.102-9.476-40.509-22.464-65.14-47.113c-24.704-24.701-37.704-48.144-47.209-65.257
                                                      c-1.003-1.813-1.964-3.561-2.913-5.221l18.176-18.149l8.936-8.947c11.097-11.1,11.403-28.826,0.721-39.521L73.39,8.194
                                                      C62.708-2.486,44.969-2.162,33.872,8.938l-15.15,15.237l0.414,0.411c-5.08,6.482-9.325,13.958-12.484,22.02
                                                      C3.74,54.28,1.927,61.603,1.098,68.941C-6,127.785,20.89,181.564,93.866,254.541c100.875,100.868,182.167,93.248,185.674,92.876
                                                      c7.638-0.913,14.958-2.738,22.397-5.627c7.992-3.122,15.463-7.361,21.941-12.43l0.331,0.294l15.348-15.029
                                                      C350.631,303.527,350.95,285.795,340.273,275.083z"></path>
                                                              </g>
                                                          </g>
                                                      </g>
                  </svg>
                                    <!-- <p>Call</p> -->
                                </div>
                            </div>
                            <div class="center-task">
                                <div class="task pull-left">
                                    <h5>{{slist.first_name}}</h5>
                                    <p>Enquiry Id: <span>{{slist.enq_num}}</span></p>
                                    <p>Model Name: <span>{{slist.variant_name}}</span></p>
                                </div>
                                <div class="task pull-right">
                                    <p>Created On: <span>{{slist.created_on|date: 'dd-MMM-yyy'}}</span></p>
                                    <p>Created Through:
                                        <span *ngIf="slist.enq_through == 'Star App'" class="star">{{slist.enq_through}} 
                      <img src="assets/img/icon_logo.png" alt="Star App">
                    </span>
                                        <span *ngIf="slist.enq_through == 'DMS'" class="dms">{{slist.enq_through}} 
                      <img src="assets/img/Icon_DMS.png" alt="DMS">
                    </span>
                                    </p>
                                    <address>
                    {{slist.address1}}
                  </address>
                                    <p *ngIf="slist.enq_through == 'Star App'">Mobile Number: <span>{{slist.custmobile}}</span></p>
                                </div>
                            </div>
                            <div class="right-task" *ngIf="slist.enq_date_type == 0">
                                <b>{{slist.newvechicledatatime_str}}
                  <!-- {{resultvalue}}
                  {{slist.newvechicledatatime}} -->
                </b>
                                <!-- <b>
                  {{resultvalue}}
                </b> -->
                                <!-- <b>{{slist.newvechicledatatime }}</b> -->
                                <!-- <b>calculatedifferencetime({{slist.newvechicledatatime}}) </b><br>to go -->
                            </div>
                            <div class="right-task green" *ngIf="slist.enq_date_type == 1">
                                <b>{{slist.newvechicledatatime_str}}
                  <!-- {{resultvalue}}
                  {{slist.newvechicledatatime}} -->
                </b>
                                <!-- <b>
                  {{resultvalue}}
                </b> -->
                                <!-- <b>{{slist.newvechicledatatime }}</b> -->
                                <!-- <b>calculatedifferencetime({{slist.newvechicledatatime}}) </b><br>to go -->
                            </div>
                            <div class="right-task grey" *ngIf="slist.enq_date_type == 2">
                                <b>{{slist.newvechicledatatime_str}}
                  <!-- {{resultvalue}}
                  {{slist.newvechicledatatime}} -->
                </b>
                                <!-- <b>
                  {{resultvalue}}
                </b> -->
                                <!-- <b>{{slist.newvechicledatatime }}</b> -->
                                <!-- <b>calculatedifferencetime({{slist.newvechicledatatime}}) </b><br>to go -->
                            </div>
                            <div class="right-task grey" *ngIf="slist.enq_date_type == undefined">
                                <b>{{slist.newvechicledatatime_str}}
                  <!-- {{resultvalue}}
                  {{slist.newvechicledatatime}} -->
                </b>
                                <!-- <b>
                  {{resultvalue}}
                </b> -->
                                <!-- <b>{{slist.newvechicledatatime }}</b> -->
                                <!-- <b>calculatedifferencetime({{slist.newvechicledatatime}}) </b><br>to go -->
                            </div>
                        </div>
                        <div class="w100" *ngIf="slist.is_testride==1">
                            <div class="center-task">
                                <div class="task pull-left p0">
                                    <p class="avail">Test Ride:<span><img src="assets/img/testride-done.png" alt="Icon">Given</span></p>
                                </div>
                            </div>
                        </div>
                        <div class="w100" *ngIf="slist.is_testride==0">
                            <div class="center-task">
                                <div class="task pull-left p0" (click)="testridestatus(slist.id,slist.mobile)">
                                    <p class="notavail">Test Ride: <span><img src="assets/img/testride-not-done.png" alt="Icon">Not Given</span></p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <pagination-controls class="pagination pac_pagenation custom-task" (pageChange)="page = getServerData($event)"></pagination-controls>
                <p *ngIf="taskslist.length == 0" class="not-found">No data found</p>
            </div>
        </div>
        <div class="col-sm-4 col-12 task-right">
            <app-taskstatus-dealer></app-taskstatus-dealer>
        </div>
    </div>
</div>