<app-main-header></app-main-header>
<app-enquirypopup></app-enquirypopup>
<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="/myenquiries"> -->
                        <p class="back" (click)="backclick()">
                            <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 " (click)="decreasMonth()">
                            <!-- <p >{{sales_date}}</p> -->
                            <p>{{sales_date}}</p>
                            <img  src="assets/img/arrow_blue_right.png" (click)="increasMonth()" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="box-type task-left" *ngIf="!loader">
                <h5>ENQUIRIES</h5>
                <div class="table-responsive" *ngIf="!loader && displayallmodellist">
                    <table class="table table-borderless my-sales">
                        <tbody *ngIf="sales_list.length==0">
                            <tr>
                                <td colspan="4">Sorry, no data available</td>
                            </tr>
                        </tbody>
                        <tbody *ngFor="let slist of sales_list">
                            <tr (click)=getselectedmodel(slist)>
                                <td><img src="{{slist.model_image_url}}" alt=""> </td>
                                <td>{{slist.modelname}}</td>
                                <td>{{slist.achieved}}/{{slist.target}} </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div *ngIf="displaylist">
                    <ul class="default task_ul" *ngIf="taskslist.length>0">
                        <li *ngFor="let slist of taskslist| paginate:{itemsPerPage: page_per_size, currentPage: activePage, totalItems: total_item }; let i=index; ">
                            <div class="left-task">
                                <div class="circle">
                                    <img src="{{model_image_url}}" alt="{{modelselectedvalue}}">
                                </div>
                            </div>
                            <div class="center-task">
                                <div class="task pull-left">
                                    <h5>{{slist.first_name}} {{slist.last_name}}
                                        <p>({{modelselectedvalue}})</p>
                                    </h5>
                                    <p>Enquiry Id: <span>{{slist.enq_num}}</span></p>
                                    <p>Model Name: <span>{{slist.variant_name}}</span></p>
                                    <p>Customer Email: <span>{{slist.email}}</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.mobile}}</span></p>
                                </div>
                            </div>
                            <!-- <div class="right-task" *ngIf="slist.enq_date_type == 0">
                <b>{{slist.newvechicledatatime_str}}
                </b>
              </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 class="task pull-left p0">
                                        <p class="notavailauto">Test Ride: <span><img src="assets/img/testride-not-done.png" alt="Icon">Not Given</span></p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <pagination-controls *ngIf="taskslist.length >0" 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>

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