<div class="pageContent">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><span class="metlifeLogo"></span></a>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li><a routerLink="/home-claim/view-payment-history" class="vertival-bar">Payment</a></li>
<li class="active"><a class="vertival-bar">Search</a></li>
<li><a href="#" class="hide-vertival-bar">Contact</a></li>
<li class="dropdown navbar-nav-border user-dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">
<span class="icon-user"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li class="welcome-nav">
<div><span>Welcome</span> <a href="#" class="link">Frank Johnson</a></div>
<div><small class="text-muted"><span class="lastLogin"></span></small></div>
</li>
<li><a href="#"><span class="icon-settings"></span>Settings</a></li>
<li><a href="#"><span class="icon-help"></span>FAQ & Help</a></li>
<li><a routerLink="/"><span class="icon-logoff"></span>Log off</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<!-- Search criteria -->
<div class="row">
<div class="searchDesktopView">
<div class="container-fluid bg-header">
<div class="row borderbottom-blue">
<div class="col-md-3">
<h3 style="color: #737373;">Criteria</h3>
</div>
</div>
</div>
<div class="well wellextend">
<div class="row">
<div class="container">
<div class="col-md-4">
<label class="labelColor">First Name</label>
<input type="text" class="form-control" value="Frank" />
</div>
<div class="col-md-4">
<label class="labelColor">Last Name</label>
<input type="text" class="form-control" placeholder="Enter Last Name" value="Johnson" />
</div>
<div class="col-md-4">
<label class="labelColor">Date Range</label>
<div class="row">
<div class="col-md-6">
<div class="labelColor col-md-3 label-from">From</div>
<div class="col-md-9">
<input type="date" class="form-control" />
</div>
</div>
<div class="col-md-6">
<div class="labelColor col-md-3 label-font-center">To</div>
<div class="col-md-9">
<input type="date" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<div class="container containermargin">
<div class="col-md-4">
<label class="labelColor">Payment Id</label>
<input type="text" class="form-control" placeholder="Enter Payment Id" />
</div>
<div class="col-md-4">
<label class="labelColor">Payment Status</label>
<select class="form-control">
<option value="">All</option>
<option value="">Accepted</option>
<option value="">Declined</option>
<option value="">Expired</option>
<option value="">EmailSent</option>
</select>
</div>
<div class="col-md-4">
<label class="labelColor">Amount (USD)</label>
<div class="row">
<div class="col-md-6">
<div class="labelColor col-md-3 label-from">From</div>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Enter Amount" />
</div>
</div>
<div class="col-md-6">
<div class="labelColor col-md-3 label-font-center">To</div>
<div class="col-md-9">
<input type="text" class="form-control" placeholder="Enter Amount" />
</div>
</div>
</div>
</div>
</div>
<div class="container containermargin">
<div class="col-md-4">
<label class="labelColor">Program Name</label>
<select class="form-control">
<option value="">Home Claim</option>
<option value="">Auto Claim</option>
</select>
</div>
<div class="col-md-4"></div>
<div class="col-md-4 search-button-alignment">
<div class="col-md-6">
<button type="button" class="btn btn-primary btn-block" (click)="onSubmit()">SUBMIT</button>
</div>
<div class="col-md-6">
<button type="button" class="btn btn-warning btn-block" (click)="onReset()">RESET</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Results pane -->
<div class="row" *ngIf="showResults">
<div class="container-fluid bg-header">
<div class="row borderbottom-blue">
<div class="col-md-2">
<h3 style="color: #737373;">Result</h3>
</div>
</div>
</div>
<div class="list-group rowBgClr">
<div class="list-group-item headerClr">
<div class="row">
<div class="col-md-2">Name / Program</div>
<div class="col-md-2">Payment ID</div>
<div class="col-md-2 text-center">Amount (USD)</div>
<div class="col-md-2">Initial Status</div>
<div class="col-md-2">Payment status</div>
<div class="col-md-2">Payment Date</div>
</div>
</div>
<a class="list-group-item" *ngFor="let result of searchResults; let i = index"
[class.border-blue]="i === 0" href="#">
<div class="row">
<div class="col-md-2">
<strong>{{ result.name }}</strong><br />
{{ result.program }}
</div>
<div class="col-md-2">{{ result.paymentId }}</div>
<div class="col-md-2 text-center">{{ result.amount | number:'1.2-2' }}</div>
<div class="col-md-2"
[class.text-danger]="result.initialStatus === 'Declined'">
{{ result.initialStatus }}
</div>
<div class="col-md-2"
[class.text-success]="result.paymentStatus === 'Email sent'">
{{ result.paymentStatus }}
</div>
<div class="col-md-2">
<div class="row">
<div class="col-md-7">{{ result.date | date:'shortDate' }}</div>
<div class="col-md-5"><span class="icon-chevron"></span></div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="pageFooter bg-footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-1 col-sm-2"><span class="icon-footer"></span></div>
<div class="col-md-4 col-sm-5">
<small>
<a href="#" class="footer-link">Terms & Condition</a> |
<a href="#" class="footer-link">Policies & Procedure</a>
</small>
</div>
<div class="col-md-4 col-sm-5 col-md-offset-3 text-right">
<small>© 2014 JPMorgan Chase & Co. all rights reserved.</small>
</div>
</div>
</div>
</div>
