<app-main-header></app-main-header>
<app-toaster-container></app-toaster-container>
<div *ngIf="downloadexcel" style="height: 0;">
    <iframe width="10px" height="10px" frameBorder="0" [src]="urlSafe"></iframe>
</div>
<div class="section task-section">

    <div class="col-sm-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="top-section row" *ngIf="!loader">
      
        <!-- dealer-header -->
        <div class="row form-inline dealer-header">
            <div class="col-sm-3 form-group custom-list">
                <div class="col-sm-3">
                    <label _ngcontent-c1="">Segment</label>
                </div>
                <div class="col-sm-9">
                    <select class="form-control" [(ngModel)]="segment" (change)="changesegment()">
                        <option  value="2">Scooter</option>
                        <option  value="1">Motorcycle</option>
                        <option  value="0">Both</option>
                    </select>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group custom-list">
                    <div class="col-sm-3">
                        <label _ngcontent-c1="">AM</label>
                    </div>
                    <div class="col-sm-9">
                        <select class="form-control" [(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>
            <div class="col-sm-3">
                <div class="form-group custom-list">
                    <div class="col-sm-3">
                        <label _ngcontent-c1="">Dealer</label>
                    </div>
                    <div class="col-sm-9">
                        <select class="form-control" [(ngModel)]="selecteddealer" (change)="getdselist($event)" required>
                            <option selected="selected"  value="">--All--</option>
                            <option *ngFor="let zm of dealerlist;let i = index" [selected]="i==0" [value]="zm.value">
                            {{zm.name}}</option>
                        </select> 
                    </div>
                </div>
            </div>
            <div class="col-sm-3 form-group custom-list">
                <div class="col-sm-3">
                    <label _ngcontent-c1="">DSE</label>
                </div>
                <div class="col-sm-9">
                    <select class="form-control minimal" [(ngModel)]="selecteddse" (change)="changedse($event)" required>
                        <option selected="selected"  value="">--All--</option>
                        <option *ngFor="let zm of dselist;let i = index" [selected]="i==0" [value]="zm.smpin">
                          {{zm.smpin}}-{{zm.fname}} {{zm.lname}}</option>
                      </select>
                </div>
            </div>
        </div>

        <!-- dealer-sub -->
        <div class="row form-inline dealer-sub">
            <!-- <div class="col-sm-4 form-group custom-list split" *ngIf="datedisplay">
                <ng-datepicker [(ngModel)]="startdate" class="followupdate" [options]="options_date" (ngModelChange)="changestartdate($event)" name="startdate" class="form-control custom-date"></ng-datepicker>
                <ng-datepicker [(ngModel)]="enddate" class="followupdate" [options]="options_date" name="enddate" (ngModelChange)="changeenddate($event)" class="form-control custom-date"></ng-datepicker>
                <button class="btn go-btn" (click)="getdatebased()">Go</button>
            </div> -->
            <div class="col-sm-3 form-group custom-list period">
                <div class="col-sm-4">
                    <label _ngcontent-c1="">Periodic Sort</label>
                </div>
                <div class="col-sm-8">
                    <select class="form-control" [(ngModel)]="periodicsort" (change)="changeperiodic()">
                        <option  value="currentmonth">Current Month</option>
                        <option  value="quarter1">Quarter 1</option>
                        <option  value="quarter2">Quarter 2</option>
                        <option  value="quarter3">Quarter 3</option>
                        <option  value="quarter4">Quarter 4</option>
                        <option  value="6months">Last 6 months</option>
                        <option value="7days">Last 7 days</option>
                        <option  value="other">Custom Date</option>
                    </select>
                </div>
            </div>

            <div class="col-sm-6 col-xs-12  custom-list split" [formGroup]="filterForm">
                <div class="row m0">
                    <div class="col-sm-4 col-xs-12 form-group" *ngIf="datedisplay">
                        <label _ngcontent-c1="">From Date:</label>
                        <input class="form-control" type="text" #dateFromDp="dpDayPicker"
                            [dpDayPicker]="dayPickerConfig" [(ngModel)]="selectedfromdate" [theme]="'dp-material'" formControlName="dateFrom"
                            [mode]="'month'" (ngModelChange)='selectfromdate()' />
                    </div>
                    <div class="col-sm-4 col-xs-12 form-group" *ngIf="datedisplay">
                        <label _ngcontent-c1="">To Date:</label>
                        <input class="form-control" type="text" #dateToDp="dpDayPicker"
                            [dpDayPicker]="dayPickerConfig_end" [(ngModel)]="selectedtodate"  [displayDate]="displayDate" [theme]="'dp-material'"
                            formControlName="dateTo" [mode]="'month'" (ngModelChange)='selecttodate()' />
                    </div>
                    <button class="btn go-btn" (click)="godateval()"
                        *ngIf="datedisplay"><span>Go</span></button>
                    <button class="btn go-btn" (click)="resetdate()" *ngIf="datedisplay"><span>Reset Date</span></button>
                </div>
            </div>

            <div class="col-sm-3 period text-right">
                <div class="form-group custom-list checks">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value=""  [(ngModel)]="isselected" id="defaultCheck1" (change)="checkValue(isselected?'0':'1')">
                        <label class="form-check-label" for="defaultCheck1" >
                Include Historical Data
            </label>
                    </div>
                </div>
                <button class="btn ml-auto" (click)="excelreport()">
                    <img src="assets/img/excel.png" alt="Icon">
                    <span>EXPORT REPORT</span>
                </button>
                <!-- <div class="ml-auto form-group custom-list search">
                    <input type="text" class="form-control" placeholder="Search">
                    <button class="btn go-btn">Go</button>
                </div> -->
            </div>

        </div>

        <div class="row report-note" *ngIf="datedisplay">
            <div class="col-sm-9 offset-sm-3">
                <p>Note: Please click RESET button to select date</p>
            </div>
        </div>

        <!-- dealer-body -->
        <div class="row dealer-body">
            <div class="col-sm-4">
                <div class="dealer-inn type" *ngIf="segment !='0'">
                    <b>{{sales_convertion_ratio}}</b>
                    <p>Sales Conversion Ratio</p>
                    <p>Achieved Sales: Achieved Enquiry</p>
                </div>
                <div class="dealer-inn type1">
                    <p>Targeted Enquiry:</p>
                    <b>{{targeted_enquiry}}</b>
                </div>
                <div class="dealer-inn type2">
                    <p>Achieved Enquiry:</p>
                    <b *ngIf="acheived_enquiry == null">0</b>
                    <b *ngIf="acheived_enquiry != null">{{acheived_enquiry}}</b>
                </div>
                <div class="dealer-inn type3">
                    <p>Targeted Sales:</p>
                    <b>{{targeted_sales}}</b>
                </div>
                <div class="dealer-inn type4">
                    <p>Achieved Sales:</p>
                    <b>{{acheived_sales}}</b>
                </div>
                <div class="lead row">
                    <h5 class="col-sm-12">Enquiry Status</h5>
                    <div class="col-sm-5 enq-status">
                        <p>
                            <b class="hot"></b> Hot:
                            <span>{{leaddata.hot}}</span>
                        </p>
                        <p>
                            <b class="warm"></b> Warm:
                            <span>{{leaddata.warm}}</span>
                        </p>
                        <p>
                            <b class="cold"></b> Cold:
                            <span>{{leaddata.cold}}</span>
                        </p>
                        <p>
                            <b class="post"></b> Postponed:
                            <span>{{leaddata.postponed}}</span>
                        </p>
                        <p>
                            <b class="lost"></b> Lost:
                            <span>{{leaddata.lost}}</span>
                        </p>
                    </div>
                    <div class="col-sm-7" *ngIf="enquirystatus_display">
                        <canvas baseChart [data]="doughnutChartData_enquirystatus" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" [options]="options" [colors]="doughnutColors"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-sm-8 chart-row">
                <div class="dealer-right converted-sales">
                    <!-- For Current Month Only -->
                    <div *ngIf="leadconversion_display && periodicsort == 'currentmonth'" class="csalesinn">
                        <div class="csalesinn1">
                            <canvas height="300" baseChart [datasets]="barChartData" [labels]="labelname" [options]="barChartOptions" [legend]="barChartLegend" [colors]="barChartColors" [chartType]="barChartType" (chartHover)="chartHovered($event)">
                            </canvas>
                        </div>
                    </div>

                    <!-- For other converted sales -->
                    <div *ngIf="leadconversion_display && periodicsort!= 'currentmonth'">
                        <canvas height="300" baseChart [datasets]="barChartData" [labels]="labelname" [options]="barChartOptions" [legend]="barChartLegend" [colors]="barChartColors" [chartType]="barChartType" (chartHover)="chartHovered($event)">
                        </canvas>
                    </div>
                    <p class="converted">
                        <span *ngIf="periodicsort == 'currentmonth'">Current Month Converted Sales</span>
                        <span *ngIf="periodicsort == 'quarter1'">Quarter 1 Converted Sales</span>
                        <span *ngIf="periodicsort == 'quarter2'">Quarter 2 Converted Sales</span>
                        <span *ngIf="periodicsort == 'quarter3'">Quarter 3 Converted Sales</span>
                        <span *ngIf="periodicsort == 'quarter4'">Quarter 4 Converted Sales</span>
                        <span *ngIf="periodicsort == '6months'">Last 6 Months Converted Sales</span>
                        <span *ngIf="periodicsort == '7days'">Last 7 Days Converted Sales</span>
                        <span *ngIf="periodicsort == 'other'">Converted Sales</span>
                        <b class="one"></b>Enquiry <b class="two"></b>Sales
                    </p>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="dealer-right" *ngIf="enquiryacheived_display">
                            <h5>Enquiry</h5>
                            <div class="center-txt">
                                <canvas baseChart [data]="doughnutChartData1_enquiry" [labels]="doughnutChartLabels1" [chartType]="doughnutChartType" [options]="options" [colors]="doughnut1Colors"></canvas>
                                <span>{{enquiry_percentage}}%</span>
                            </div>
                            <p>Enquiry Achieved vs Target</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="dealer-right" *ngIf="salesacheived_display">
                            <h5>Sales</h5>
                            <div class="center-txt">
                                <canvas baseChart [data]="doughnutChartData2_sales" [labels]="doughnutChartLabels2" [chartType]="doughnutChartType" [options]="options" [colors]="doughnut2Colors"></canvas>
                                <span>{{sales_percentage}}%</span>
                            </div>                           
                            <p>Sales Achieved vs Target</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="dealer-right" *ngIf="convertion_display">
                            <h5>Conversion</h5>
                            <div class="center-txt">
                                <canvas baseChart [data]="doughnutChartData3_convertion" [labels]="doughnutChartLabels3" [chartType]="doughnutChartType" [options]="options" [colors]="doughnut3Colors"></canvas>
                                <span>{{conversion_percentage}}%</span>
                            </div>
                            <p>Total Achieved/Total Sales</p>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="dealer-right productivity" *ngIf="productivity_display">
                            <h5>Productivity</h5>
                            <canvas baseChart [data]="pieChartData_productivity" [labels]="pieChartLabels" [chartType]="pieChartType" [options]="options" [colors]="piechartColors"></canvas>
                            <p><b class="one"></b>Productive DSE - {{production_percentage}}%</p>
                            <p><b class="two"></b>Zero Productive DSE - {{zerproduction_percentage}}%</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>