<title>Leads</title>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <app-breadcrumb [title]="'Leads'" [active_item]="'Leads'">
      </app-breadcrumb>
    </div>
    <div class="col-sm-6 text-right">
      <div ngbDropdown class="btn-group">
        <div class="ml-2">
          <a *ngIf="isWritePermission" title="{{ 'tooltip_lbl_add_employment_nature' |translate}}" href="javascript:;"
            class="btn btn-sm btn-info filterbtn iconplusbtn" style="padding: 12.3px 12px;
                                  border-radius: 10px;
                                  margin: 0 5px;
                                  display: flex;
                                  justify-content: center;
                                  align-items: center;" (click)="navigateAddLead()">
            <i class="icon-plus"></i>
          </a>
        </div>

        <button *ngIf="leads && leads.length > 0" type="button" class="btn btn-info filterbtn" style="margin-right: 5px;
            border-radius: 10px;
            padding:8px 14px;
            align-items: center;
            display: flex;
            justify-content: center" title="{{ 'tooltip_lbl_download_csv' |translate}}" (click)="downloadCsv()">
          <i class="icon-download pr-1"></i>
          <span>{{'lbl_downLoad_csv'| translate}}</span>
        </button>
        <button type="button" class="btn btn-info filterbtn" *ngIf="isWritePermission" style="margin-right: 5px;
        border-radius: 10px;
        padding:8px 14px;
        align-items: center;
        display: flex;
        justify-content: center" title="{{ 'leads_tooltip_lbl_filter_leads' |translate}}" (click)="drawer.toggle();">
          <i class="icon-filter pr-1"></i>
          <span>{{'button_lbl_filter'| translate}}</span>
        </button>
      </div>
    </div>
    <mat-drawer-container autosize>
      <div class="card">

        <ng-container *ngIf="leads && isFlag else NoLeads">
          <div class="contentcard table-responsive userlist-table">
            <!-- table-responsive border-top userlist-table -->
            <table mat-table [dataSource]="leads" class="mat-elevation-z8 table-striped table-vcenter lastcolumntable"
              style="min-width: 1900px; box-shadow: none;" aria-label="">
              <ng-container matColumnDef="id">
                <th mat-header-cell *matHeaderCellDef style="width:75px">#</th>
                <td mat-cell *matCellDef="let element; let i = index;" style="width:75px">
                  {{(paginate.currentPage - 1) * paginate.pageSize + i + 1}}
                </td>
              </ng-container>
              <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef>{{'lbl_name'| translate}}</th>
                <td mat-cell *matCellDef="let element">
                  <div *ngIf="element.customerFullName else NoValue">
                    {{element.customerFullName}}
                  </div>
                  <ng-template #NoValue>
                    --
                  </ng-template>
                </td>
              </ng-container>
              <ng-container matColumnDef="contactNo">
                <th mat-header-cell *matHeaderCellDef>{{'lbl_contact_no'| translate}}</th>
                <td mat-cell *matCellDef="let element">
                  <div *ngIf="element.contactNo else NoValue">
                    {{element.contactNo}}
                  </div>
                  <ng-template #NoValue>
                    --
                  </ng-template>
                </td>
              </ng-container>
              <ng-container matColumnDef="service">
                <th mat-header-cell *matHeaderCellDef>{{'lbl_service'| translate}}</th>
                <td mat-cell *matCellDef="let element">
                  <div *ngIf="element.serviceName else NoValue">
                    {{element.serviceName}}
                  </div>
                  <ng-template #NoValue>
                    --
                  </ng-template>
                </td>
              </ng-container>
              <ng-container matColumnDef="loanAmount">
                <th mat-header-cell *matHeaderCellDef>{{'lbl_loan_amount'| translate}}</th>
                <td mat-cell *matCellDef="let element">
                  <div *ngIf="element.loanAmount else NoValue">
                    {{currency}}{{element.loanAmount}}
                  </div>
                  <ng-template #NoValue>
                    --
                  </ng-template>
                </td>
              </ng-container>
              <ng-container matColumnDef="createdBy">
                <th mat-header-cell *matHeaderCellDef style="width: 15%;">{{'leads_lbl_created_by'|
                  translate}}</th>
                <td mat-cell *matCellDef="let element" style="width: 15%;">
                  {{element.createdByUser}}-{{element.createdByContactNo}}
                </td>
              </ng-container>
              <ng-container matColumnDef="leadStatus">
                <th mat-header-cell *matHeaderCellDef>{{'lbl_status'| translate}}</th>
                <td mat-cell *matCellDef="let element">
                  <span
                    [ngStyle]="{'color':element?.statusHistory && element?.statusHistory.length > 0 && element?.statusHistory[0]?.name == 'CloseWon'? '#78b144':'red' }">{{element?.statusHistory
                    && element?.statusHistory[0]?.name}}</span>
                </td>
              </ng-container>
              <ng-container matColumnDef="assignToPartner">
                <th mat-header-cell *matHeaderCellDef style="width: 12%;">{{'lbl_assign_partner'|
                  translate}}</th>
                <td mat-cell *matCellDef="let element" style="width: 12%;">
                  {{element.partnerName}} - {{element.partnerContactNo}}
                </td>
              </ng-container>
              <ng-container matColumnDef="createdDate">
                <th mat-header-cell *matHeaderCellDef>{{'lbl_created_date'| translate}}</th>
                <td mat-cell *matCellDef="let element">
                  {{element.createdDate | date:'medium'}}
                </td>
              </ng-container>
              <ng-container matColumnDef="action" stickyEnd>
                <th mat-header-cell *matHeaderCellDef translate class="text-right" style="width: 6%;">{{'lbl_action'|
                  translate}}</th>
                <td mat-cell *matCellDef="let element" class="text-right" style="width: 6%;">
                  <a *ngIf="isEditPermission && element?.statusHistory && element?.statusHistory.length > 0 && element?.statusHistory[0].name =='Pending' && element?.statusHistory[0].name!='CloseWon'"
                    title="{{ 'leads_tooltip_lbl_assign_to_partner' |translate}}" href="javascript:;"
                    class="btn btn-sm btn-info filterbtn"
                    style="padding: 10px 12px;border-radius: 10px;margin: 3px 22px 3px 0;"
                    (click)="modalOpen(element,basicmodal,'assignPartner')">
                    <i class="icon-user"></i>
                  </a>
                  <a *ngIf="isEditPermission && element.partnerContactNo  && element?.statusHistory && element?.statusHistory.length > 0 && element?.statusHistory[0].name!='CloseWon'"
                    title="{{ 'tooltip_lbl_change_status' |translate}}" href="javascript:;"
                    class="btn btn-sm btn-info filterbtn"
                    style="padding: 10px 12px;border-radius: 10px;margin: 0 22px 0 0;"
                    (click)="modalOpen(element,basicmodal,'changeStatus')">
                    <i class="icon-control-forward"></i>
                  </a>
                  <a *ngIf="isEditPermission && !element.partnerContactNo  && element?.statusHistory && element?.statusHistory.length > 0 && element?.statusHistory[0].name!='CloseWon'"
                    title="{{ 'leads_tooltip_lbl_edit_lead' |translate}}" href="javascript:;"
                    class="btn btn-sm btn-info filterbtn"
                    style="padding: 10px 12px;border-radius: 10px;margin: 0 22px 0 0;"
                    (click)="navigateAddLead(element)">
                    <i class="icon-pencil"></i>
                  </a>
                </td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef="displayColumns; sticky: true"></tr>
              <tr mat-row *matRowDef="let row; columns: displayColumns;" class="student-element-row"
                style="cursor: pointer;">
              </tr>

            </table>
          </div>
        </ng-container>

        <ng-template #NoLeads>
          <div class="d-flex vertical-center nodata">
          </div>
        </ng-template>

        <div class="card-footer" *ngIf="leads && leads.length > 0">
          <ul class="pagination mb-0 float-right">
            <li [ngClass]="{ disabled: paginate.currentPage == 1 }" class="page-item page-prev">
              <a class="page-link" href="javascript:;" tabindex="-1" (click)="setPage(paginate.currentPage - 1)">
                <span>{{'Prev'| translate}}</span>
              </a>
            </li>
            <li *ngFor="let page of paginate.pages" class="page-item active"
              [ngClass]="{ active: paginate.currentPage == page }">
              <a [ngClass]="{current:paginate.currentPage == page}" class="page-link" href="javascript:;"
                (click)="setPage(page)">
                {{page}}
              </a>
            </li>
            <li [ngClass]="{ disabled: paginate.currentPage === paginate.totalPages}"
              (click)="setPage(paginate.currentPage + 1)" class="page-item page-next">
              <a class="page-link" href="javascript:;"><span>{{'Next'| translate}}</span></a>
            </li>
          </ul>
        </div>
      </div>

      <ng-template #NoLeads>
        <div class="d-flex vertical-center nodata">
        </div>
      </ng-template>
      <mat-drawer #drawer class="example-sidenav" mode="over" position="end">
        <div class="col-lg-12 px-3 pt-3">
          <div class="d-inline" style="width: 100%;"><i class="fa fa-filter pr-1"><span
                class="ml-1">{{'button_lbl_filter'|
                translate}}</span></i>
            <button v class="close" aria-label="Close" (click)="drawer.toggle();">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div>
        <hr>
        <div class="px-3" style="height: calc(100vh - 310px);">
          <div class=" mb-3">
            <label for="services">{{'lbl_select_service'| translate}}</label>
            <ng-select [items]="services" class="js-example-basic-single p-0" [(ngModel)]="selectedServices"
              placeholder="{{'lbl_select_service'| translate}}" bindLabel="displayName" bindValue="id" name="service"
              [multiple]="true" id="services">
            </ng-select>
          </div>
          <div class="mb-3">
            <label for="partners">{{'leads_lbl_select_partner'| translate}}</label>
            <ng-select [items]="partner" class="js-example-basic-single p-0" [(ngModel)]="selectedPartner"
              placeholder="Select Partners" bindLabel="fullName" bindValue="id" name="selectedPartner" [multiple]="true"
              id="partners">
            </ng-select>
          </div>

        </div>

        <div class="modal-footer p-0" style="margin-bottom: 20px; justify-content: center;">
          <div class="float-right d-inline">
            <button type="button" class="btn btn-secondary filterbtn"
              style="margin-right: 5px;border-radius: 10px;padding:8px 14px; margin-top: 3px;"
              title="{{ 'tooltip_lbl_clear_filter' |translate}}" (click)="drawer.toggle();clearSearch();">
              <span>{{'button_lbl_clear'| translate}}</span>
            </button>
            <button type="button" class="btn btn-info filterbtn"
              style="margin-right: 5px;border-radius: 10px;padding:8px 14px; margin-top: 3px;"
              title="{{ 'tooltip_lbl_filter_loans' |translate}}" (click)="drawer.toggle();setPage(1);">
              <span>{{'lbl_search'| translate}}</span>
            </button>
          </div>
        </div>



        <div class="px-3">
        </div>
      </mat-drawer>
    </mat-drawer-container>
  </div>
</div>


<ng-template #basicmodal let-modal>
  <div>
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body pd-20">
      <ng-container *ngIf="isAssignPartner">
        <div class="form-group">
          <label for="name">{{'leads_lbl_select_partner'| translate}}</label>
          <ng-select [items]="partner" class="js-example-basic-single p-0" [(ngModel)]="partnerId"
            placeholder="Select Partner" bindLabel="fullName" bindValue="id" name="partner" required
            #selectedPartnerId="ngModel">
          </ng-select>
          <mat-error *ngIf="!selectedPartnerId?.valid && selectedPartnerId?.touched">
            {{'message_lbl_partner_is_required'| translate}}
          </mat-error>
        </div>
      </ng-container>
      <ng-container *ngIf="isChangeStatus">
        <div class="form-group">
          <label for="name">{{'lbl_select_status'| translate}} <span style="color: red;">*</span></label>
          <ng-select [items]="selectedLeadStatuses" class="js-example-basic-single p-0" [(ngModel)]="statusId"
            placeholder="{{ 'lbl_select_status' |translate}}" bindLabel="name" bindValue="id" name="status" required
            #selectedStatusId="ngModel">
          </ng-select>
          <mat-error *ngIf="!selectedStatusId?.valid && selectedStatusId?.touched">
            {{'message_lbl_status_is_required'| translate}}
          </mat-error>
        </div>
      </ng-container>
    </div>
    <div class="modal-footer">
      <button *ngIf="isAssignPartner" class="btn btn-info filterbtn" (click)="assignToPartner()">
        {{'lbl_assign'| translate}}
      </button>
      <button *ngIf="isChangeStatus" class="btn btn-info filterbtn" (click)="getSelectedStatus()">
        {{'button_lbl_save'| translate}}
      </button>
      <button class="btn btn-secondary filterbtn" (click)="closeDialog()">
        {{'button_lbl_cancel'| translate}}
      </button>
    </div>
  </div>
</ng-template>