<div class="containerfluid content-box">

<!-- Page Content Holder -->

<div class="container-fluid wrapper">
<div class="row">
<div class="lead-info col-sm-10 col-md-10 col-xs-10 col-lg-10">
<!-- <h2>All Leads </h2> -->
<div class="row button-group">

<div class="col-md-3">
<h2>All Leads </h2>
<div id="rowresult" class="fif">{{leadlength}} total results</div>
</div>

<div class="col-md-9">
<div class="data">
<div id="result">

<div id="reslead" class="fif">

<div class="wrap-mail">

<button class="lead-btn-grp whiteshadow" matTooltip="Bulk-Email" data-

toggle="dropdown">
<mat-icon>email</mat-icon>
</button>
<ul class="dropdown-menu" role="menu">
<a class="wrap-box" mat-button data-toggle="modal" data-target="#pop"
role="menuitem">
<li>
<div id="new" class="move">
<h5 class="pull-left"><span>
<mat-icon class="pull-left">email</mat-icon>
</span><b>Bulk Email</b>
</h5>
<p class="pull-left"> Send a single email to
Contacts in this search query.</p>
</div>
</li>
</a>

<a mat-button data-toggle="modal" data-target="#popp" role="menuitem" class="wrap-

box">
<li>
<div id="new" class="move">
<h5 class="pull-left"><span>
<mat-icon class="pull-left">email</mat-icon>
</span><b>Send an Email Sequence</b>
</h5>
<p class="pull-left">Send a series of emails to Contacts in
this search query, until they reply.</p>
</div>
</li>
</a>

<a mat-button data-toggle="modal" class="wrap-box" role="menuitem">

<li>
<div id="new" class="move">
<h5 class="pull-left">
<span>
<mat-icon class="pull-left">settings</mat-icon>
</span><b>Manage Email Sequences</b>
</h5>
<p class="pull-left">Pause and resume Email
Sequences
for
Contacts in this search query.
</p>
</div>
</li>
</a>
</ul>
</div>

<div class="wrap-sms">

<button class="lead-btn-grp whiteshadow" matTooltip="Bulk-SMS" data-

toggle="dropdown">
<mat-icon>forum</mat-icon>
</button>
<ul class="dropdown-menu" role="menu">
<a class="wrap-box" mat-button data-toggle="modal" data-target="" role="menuitem">
<li>
<div id="new" class="move">
<h5 class="pull-left"><span>
<mat-icon class="pull-left">sms</mat-icon>
</span><b>Bulk SMS</b>
</h5>
<p class="pull-left ssms"> Send a single sms to Contacts in
this search query.</p>
</div>
</li>
</a>

<a mat-button data-toggle="modal" data-target="" role="menuitem" class="wrap-box">

<li>
<div id="new" class="move">
<h5 class="pull-left">
<span>
<mat-icon class="pull-left">sms</mat-icon>
</span><b>Send an SMS Sequence</b>
</h5>
<p class="pull-left">Send a series of SMS to
Contacts in this
search query,
until they reply
</p>
</div>
</li>
</a>

<a mat-button data-toggle="modal" role="menuitem" class="wrap-box">

<li>
<div id="new" class="move">
<h5 class="pull-left">
<span>
<mat-icon class="pull-left">settings</mat-icon>
</span><b>Manage SMS Sequences</b>
</h5>
<p class="pull-left">Pause and resume SMS
Sequences
for
Contacts in this search query.</p>
</div>
</li>
</a>

</ul>
</div>

<!-- <select id="contact" name="contact" class="form-control widthSize"

formControlName="contact" [(ngModel)]="contact">
Email
</select> -->

<button matTooltip="call" class="lead-btn-grp whiteshadow">

<mat-icon> call</mat-icon>
</button>

<button matTooltip="New Lead" class="lead-btn-grp whiteshadow" data-toggle="modal"

data-target="#myModal">
<mat-icon>add</mat-icon>
</button>

<button matTooltip="Edit" class="lead-btn-grp whiteshadow">

<mat-icon>create</mat-icon>
</button>
<button matTooltip="Export" class="lead-btn-grp whiteshadow">
<mat-icon>get_app</mat-icon>
</button>
<!-- <button matTooltip="Sort" class="lead-btn-grp whiteshadow" >
<mat-icon>swap_vert</mat-icon>
</button> -->

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

</div>
<div id="resultslead" class="resultsleadsview">

<ng6-pagination [allItems]="FilteredLeadArray.length==0?testing:FilteredLeadArray"
[pageSize]="itemsPerPage"
(pageChange)="currentPage = $event" itemsPerPage></ng6-pagination>
<table matSort (matSortChange)="sortData($event)" class="table table-bordered table-
hover">

<thead class="whiteshadow">
<tr>
<th mat-sort-header="company">Company</th>
<th mat-sort-header="contactname">Contacts</th>
<th mat-sort-header="status">Status</th>
</tr>
</thead>

<!-- <tbody *ngFor="let item of (FilteredLeadArray.length==0?testing:FilteredLeadArray) |

paginate : itemsPerPage : currentPage;"> -->
<!-- <tbody *ngFor="let item of (FilteredLeadArray.length==0?
testing:FilteredLeadArray)"> -->

<tbody *ngFor="let item of (FilteredLeadArray.length==0?testing:FilteredLeadArray) |

paginate : itemsPerPage : currentPage;">
<tr>
<td class="comp-name">
<a routerLink="/allleadspage/{{item._id}}">{{item.company}}</a>
<button class="glyphicon pull-right detail-btn">&#xe182;</button>
<button id="emails" class="glyphicon pull-right detail-btn">&#x2709;</button>
</td>
<td class="comp-contacts"><span *ngFor="let contact of allContact">

<span *ngIf="contact.leadid == item._id">{{contact.name}},</span></span>

</td>
<td>{{item.status}}</td>
</tr>
</tbody>
</table>

</div>
</div>
<div class="leadFilter col-sm-2 col-md-2 col-xs-2 col-lg-2">
<div class="LeadMenu">
<div class="iconMove"><i id="arrowPointer" class="fa fa-caret-right arrow-right"
(click)="displayLeadsMenu()"></i></div>
Leads
</div>
<mat-list role="list" *ngIf="listhide" class="LIstStyle">
<mat-form-field class="ContactSerachFil">
<input #mycontactInput matInput placeholder="Contacts" [(ngModel)]="ContactsFilter"
(input)="filterContacts(mycontactInput.value)">
<!-- <input matInput placeholder="Contacts" [(ngModel)]="ContactsFilter" >-->
</mat-form-field>
<mat-list-item role="listitem">
<div class="MenuList">Status</div>
<mat-form-field class="menuStyling FirstItem" floatLabel="never">
<mat-select #MAtSatus matNativeControl [(ngModel)]="statusvalue" placeholder="Add"
(selectionChange)="fliterLeadsStatus($event.value)">
<mat-optgroup label="Current">
<mat-option value="Potential">Potential</mat-option>
<mat-option value="Bad Fit">Bad Fit</mat-option>
<mat-option value="Qualified">Qualified</mat-option>
<mat-option value="Customer">Customer</mat-option>
<mat-option value="Interested">Interested</mat-option>
<mat-option value="Canceled">Canceled</mat-option>
<mat-option value="Not Interested">Not Interested</mat-option>
</mat-optgroup>
<mat-optgroup label="Previous">
<mat-option value="Potential">Potential</mat-option>
<mat-option value="Bad Fit">Bad Fit</mat-option>
<mat-option value="Qualified">Qualified</mat-option>
<mat-option value="Customer">Customer</mat-option>
<mat-option value="Interested">Interested</mat-option>
<mat-option value="Canceled">Canceled</mat-option>
<mat-option value="Not Interested">Not Interested</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
</mat-list-item>
<mat-list-item role="listitem">
<div class="MenuList">User</div>
<mat-form-field class="menuStyling" floatLabel="never">
<mat-select #uSerValue matNativeControl [(ngModel)]="userVAl" placeholder="Add"
(selectionChange)="fliterLeadsUser($event.value)">
<mat-optgroup label="Created By">
<mat-option value="Me">Me</mat-option>
</mat-optgroup>
<mat-optgroup label="Last Updated By">
<mat-option value="Me">Me</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
</mat-list-item>
<mat-list-item role="listitem">
<div class="MenuList">Date</div>
<mat-form-field class="menuStyling" floatLabel="never">
<mat-select #DateVal matNativeControl placeholder="Add" [(ngModel)]="Datev"
(selectionChange)="fliterLeadDate($event.value)">
<mat-optgroup label="Created">
<mat-option value="Today">Today</mat-option>
<mat-option value="yesterday">yesterday</mat-option>
<mat-option value="This Week">This Week</mat-option>
<mat-option value="This Month">This Month</mat-option>
<mat-option value="This quarter">This quarter</mat-option>
<mat-option value="This year">This year</mat-option>
<mat-option value="Last Week">Last Week</mat-option>
<mat-option value="Last Month">Last Month</mat-option>
<mat-option value="Last Quarter">Last Quarter</mat-option>
<mat-option value="Last Year">Last Year</mat-option>
</mat-optgroup>
<mat-optgroup label="Last Updated">
<mat-option value="Today">Today</mat-option>
<mat-option value="yesterday">yesterday</mat-option>
<mat-option value="This Week">This Week</mat-option>
<mat-option value="This Month">This Month</mat-option>
<mat-option value="This quarter">This quarter</mat-option>
<mat-option value="This year">This year</mat-option>
<mat-option value="Last Week">Last Week</mat-option>
<mat-option value="Last Month">Last Month</mat-option>
<mat-option value="Last Quarter">Last Quarter</mat-option>
<mat-option value="Last Year">Last Year</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
</mat-list-item>
</mat-list>
</div>
</div>

<!-- This ng if condition div is for showing the div only when the user has no leads added--
>
<div class="row" *ngIf="leadlength == '0'">
<div class="col-sm-12 col-md-9 col-xs-12 col-lg-9">
<div class="blbox">
<div class="space1">
<span class="title1">Tip:</span><span>Add

some leads…</span>
</div>
<p class="space">
<span>You don't have many leads/contacts yet!</span><span class="title2"> Learn
about

the many ways to add leads

into

Zibtek.

</span>
</p>
</div>
</div>
</div>
</div>
</div>

<!--modal for adding new lead-->

<div class="modal modal-b fade" id="myModal" tabindex="-1" role="dialog"
arialabelledby="myModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h3 class="modal-title">New Lead - {{userCredentials.username}}</h3>
</div>
<form [formGroup]="leadspageForm" id="leadspage" name="leadspage"
(ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<h3> Company/Organization Name:</h3>
<input type="text" class="form-control" formControlName="company" id="company"
name="company"
[ngClass]="{ 'is-invalid': submitted && f.company.errors }">
<div *ngIf="submitted && f.company.errors" class="invalid-feedback">
<div *ngIf="f.company.errors.required">Company Name is required</div>
</div>
</div>
<div class="col-md-6">
<h3>Contact Name:</h3>
<input type="text" class="form-control" formControlName="contactname"
id="contactname" name="contactname"
(keyup)="getdata()" [ngClass]="{ 'is-invalid': submitted && f.contactname.errors }">
<div *ngIf="submitted && f.contactname.errors" class="invalid-feedback">
<div *ngIf="f.contactname.errors.required">Contact Name is required</div>
</div>
<!-- <input type="hidden" class="form-control" formControlName="createdby"
id="createdby" name="createdby"
[(ngModel)]="createdby"> -->
</div>
</div>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input class="btn btn-default" [disabled]="!leadspageForm.valid" value="createlead"
type="submit"
(click)="leadspage()" data-dismiss="modal">
</div>
</form>
</div>
</div>
</div>

<!-- Modal for first one in bulk-email -->

<div class="modal modal-b fade1" id="pop" tabindex="-1" role="dialog"

arialabelledby="myModalLabel">
<div class="modal-dialog modal-md">
<div class="modal-content">
<!-- <ul class="dropdown-menu" role="menu">
<li>
<a mat-button data-toggle="modal" data-target="#pop" role="menuitem">
<span>
<mat-icon class="pull-left dropdown-icon">email</mat-icon>
</span>
<div id="new" class="pull-left">
<h5 class="pull-left"><b>Bulk Email</b></h5>
<br>
<p class="pull-left"> Send a single email to
Contacts in this search query.</p>
</div>
</a>
</li>

<li>
<a mat-button data-toggle="modal" data-target="#popp" role="menuitem"
class="wrap-box">
<span>

<mat-icon class="pull-left">email</mat-icon>
</span>
<div class="move">
<h5 class="pull-left"><b>Send an Email Sequence</b></h5>
<p class="pull-left">Send a series of emails to
Contacts in this
search query,
until they reply
</p>
</div>
</a>
</li>

<li>
<a role="menuitem">
<span class="glyphicon glyphicon-cog dropdown-icon" id="sp"></span>
<div class="move">
<h5 class="pull-left"><b>Manage Email Sequences</b>

<span class="label label-info call-label">New</span>

</h5>
<p class="pull-left">Pause and resume Email
Sequences
for
Contacts in this search query.</p>
</div>
</a>
</li>

</ul> -->
<div class="modal-header1">
<form [formGroup]="campaignsForm">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Send Bulk Email{{username}}</h4>
<hr>
<p class="call"><span class="bigger">{{leadlength}}</span> leads will be
emailed</p>
<b>Search Query:</b>
<p>*(All Leads)</p>
<div class="form-group col-md-12">
<label for="templates">Templates</label>
<select class="form-control" id="exampleFormControlSelect1">
<option (click)="onChange(template.templatename,i)"
[(value)]='template.templatename'
*ngFor="let template of templates;">{{template.templatename}}</option>
</select>
</div> <br>

<div class="form-group col-md-12">

<label for="ForEachLead">For Each Lead , email...</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>only the First Contact</option>
<option>All contact</option>
</select>
</div>
<br>
<p>If a contact has multiple email addresses, only the first one will be emailed.</p>
</form>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-
dismiss="modal">Cancel</button>
<button class="btn btn-success" value="Preview" type="submit" (click)="leadspage()"
data-dismiss="modal">Preview<span
class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
</div>
</div>
</div>
<!-- for Second one in bulk-email -->
<div class="modal modal-b fade1" id="popp" tabindex="-1" role="dialog"
arialabelledby="myModalLabel">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header1">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Send an Email Sequence{{username}}</h4>
<hr class="m-0">
<div class="modal-body color-dark-grey">
<p class="white">Email will send to Contact.</p>
<p class="white"> *</p>
<button type="button" class="btn btn-primary">~$Leads</button>
</div>
<br>
<div class="row">
<div class="col-8 col-sm-6 col-example">
For each lead send to:
</div>
<div class="col-8 col-sm-6 col-example">
From to:
</div>
<br>
<div class="col-8 col-sm-6 col-example">
<div class="select">
<select name="slct" id="slct">
<option value="Contract">Only the first contract</option>
<option value="Contract1">Contract is for 1 year</option>
<option value="Contrat2">No contract for the person</option>
</select>
</div>
</div>
<div class="col-4 col-sm-6 col-example">
<div class="select">
<select name="slct" id="slct">
<option value="Contract">Choose an email sequence</option>
<option value="Contract1">Older is apper 1st</option>
<option value="Contrat2">New one appear 1st</option>
</select>
</div>
</div>
<br><br> <br>
<div class="col-sm-9 col-example styled-select yellow rounded">
<div class="select">
<select name="slct" id="slct">
<option value="Contract">Choose an email sequence</option>
<option value="Contract1">Older is apper 1st</option>
<option value="Contrat2">New one appear 1st</option>
</select>
</div>
</div>
</div>
</div>

<div class="modal-footer">
<p class="alignleft custom-blue">Learn about an Email Sequence</p>
<p class="alignright"><button class="btn btn-success" value="Preview" type="submit"
(click)="leadspage()"
data-dismiss="modal">Preview<span class="glyphicon glyphicon-chevron-
right"></span>
</button></p>
<p class="alignright custom-blue"><button class="button
button2">Cancel</button></p>
</div>

</div>
</div>
</div>
<app-introtour></app-introtour>