<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<meta charset="utf-8">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<hr class="">
<div class="container target">
<div class="row">
<div class="col-sm-10">
<h1 class="">PATIENT</h1>
<button type="button" class="btn btn-warning">Edit Profile</button> <button type="button" class="btn btn-info">Access Calendar</button>
<br>
</div>
<div class="col-sm-2"><a href="/users" class="pull-right"><img title="profile image" class="img-circle img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBG685vI07-3MsuqJxjCfzIabfFJJG-8yM-ppvjjNpD5QNtWNE4A"></a>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-3">
<!--left col-->
<ul class="list-group">
<li class="list-group-item text-muted" contenteditable="false">Profile</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Name: </strong></span> Justine Tan</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Home Address: </strong></span>Central Signal Village, Taguig</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Email: </strong></span> justineeetaaan@yahoo.com</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Birthday: </strong></span>24 December 1992</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Age: </strong></span>25</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Sex: </strong></span>Female</li>
<li class="list-group-item text-muted" contenteditable="false">Contact Details</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Telephone Number: </strong></span>N/A</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Cellphone Number: </strong></span>09278140304</li>
</ul>
<div class="panel panel-default">
<div class="panel-heading">Reminders:
</div>
<div class="panel-body"><i style="color:green" class="fa fa-check-square-o"></i> Upcoming consultation @ __________
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">NOTIFICATIONS <i class="fa fa-link fa-1x"></i>
</div>
<div class="panel-body"><button type="button" class="btn btn-basic">Check Status of Uploads
</div>
</div>
<ul class="list-group">
<li class="list-group-item text-muted">Attending Doctors:<i class="fa fa-dashboard fa-1x"></i>
</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Joaquin Buenabora </strong></span>A</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Michael Yi </strong></span>B</li>
<li class="list-group-item text-right"><span class="pull-left"><strong class="">Camille Uy </strong></span> C</li>
<br><button type="button" class="btn btn-info">Append Doctor Access</span>
</ul>
<div class="panel panel-default">
<div class="panel-heading">UPLOADED MEDICAL-RELATED DOCUMENTS</div>
<div class="panel-body"><button type="button" class="btn btn-warning">Upload Document
<br><button type="button" class="btn btn-success">View Uploads
</div>
</div>
</div>
<!--/col-3-->
<div class="col-sm-9" style="" contenteditable="false">
<div class="panel panel-default">
<div class="panel-heading"><b>Update your profile credentials here:</b></div>
<div class="panel-body">
<i class="fa fa-envelope fa" aria-hidden="true"></i>
<div class="col-xs-4">
<input type="text" class="form-control input-sm" name="givenName" id="givenName" placeholder="Given Name"/>
</div>
<div class="col-xs-4">
<input type="text" class="form-control input-sm" name="middleName" id="middleName" placeholder="Middle Name"/>
</div>
<div class="col-xs-4">
<input type="text" class="form-control input-sm" name="lastName" id="lastName" placeholder="Last Name"/> </div>
<div class="col-xs-8">
<input type="text" class="form-control input-sm" name="homeAddress" id="homeAddress" placeholder="Home Address"/>
</div>
<div class="col-xs-4">
<input type="email" class="form-control input-sm" name="email" id="email" placeholder="Email Address"/>
</div>
<div class="col-xs-3">
<input type="tel" class="form-control input-sm" name="telNumber" id="telNumber" placeholder="Tel. No."/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control input-sm" name="cellNumber" id="cellNumber" placeholder="Cellphone Number"/>
</div>
<div class="col-xs-2">
<input type="number" class="form-control input-sm" name="age" id="age" min =0 placeholder="Age"/>
</div>
<div class="col-xs-4">
<b> Birthday:</b>
<input type="date" class="form-control input-sm" name="birthday" id="birthday" placeholder="Birthday"/>
</div>
<b> Gender:</b><br>
<div class="col-xs-1">
<input type="radio" class="form-control" name="sex" value="male" id="sex" checked/><center><i>Male</i></center>
</div>
<div class="col-xs-1">
<input type="radio" class="form-control" name="sex" value="female" id="sex"/><center><i>Female</i></center>
</div>
</div>
<center>
<button type="button" class="btn btn-primary"> Update</button> <button type="button" class="btn btn-secondary">Clear</button>
</div><
</div></div>
<script src="/plugins/bootstrap-pager.js"></script>
</div>
</body>
</html>
<input type="checkbox"name="a"value="a"> Medication A <input type="checkbox"name="a"value="a"> Medication B <input type="checkbox"name="a"value="a"> Medication C <input type="checkbox"name="a"value="a"> Medication D
/* pagination */
$.fn.pageMe = function(opts){
var $this = this,
defaults = {
perPage: 7,
showPrevNext: false,
numbersPerPage: 1,
hidePageNumbers: false
},
settings = $.extend(defaults, opts);
var listElement = $this;
var perPage = settings.perPage;
var children = listElement.children();
var pager = $('.pagination');
if (typeof settings.childSelector!="undefined") {
children = listElement.find(settings.childSelector);
}
if (typeof settings.pagerSelector!="undefined") {
pager = $(settings.pagerSelector);
}
var numItems = children.size();
var numPages = Math.ceil(numItems/perPage);
pager.data("curr",0);
if (settings.showPrevNext){
$('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
}
var curr = 0;
while(numPages > curr && (settings.hidePageNumbers==false)){
$('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
curr++;
}
if (settings.numbersPerPage>1) {
$('.page_link').hide();
$('.page_link').slice(pager.data("curr"), settings.numbersPerPage).show();
}
if (settings.showPrevNext){
$('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
}
pager.find('.page_link:first').addClass('active');
if (numPages<=1) {
pager.find('.next_link').hide();
}
pager.children().eq(1).addClass("active");
children.hide();
children.slice(0, perPage).show();
pager.find('li .page_link').click(function(){
var clickedPage = $(this).html().valueOf()-1;
goTo(clickedPage,perPage);
return false;
});
pager.find('li .prev_link').click(function(){
previous();
return false;
});
pager.find('li .next_link').click(function(){
next();
return false;
});
function previous(){
var goToPage = parseInt(pager.data("curr")) - 1;
goTo(goToPage);
}
function next(){
goToPage = parseInt(pager.data("curr")) + 1;
goTo(goToPage);
}
function goTo(page){
var startAt = page * perPage,
endOn = startAt + perPage;
children.css('display','none').slice(startAt, endOn).show();
if (page>=1) {
pager.find('.prev_link').show();
}
else {
pager.find('.prev_link').hide();
}
if (page<(numPages-1)) {
pager.find('.next_link').show();
}
else {
pager.find('.next_link').hide();
}
pager.data("curr",page);
if (settings.numbersPerPage>1) {
$('.page_link').hide();
$('.page_link').slice(page, settings.numbersPerPage+page).show();
}
pager.children().removeClass("active");
pager.children().eq(page+1).addClass("active");
}
};
$('#items').pageMe({pagerSelector:'#myPager',childSelector:'tr',showPrevNext:true,hidePageNumbers:false,perPage:5});
/****/
