<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 ---------->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="navbar-brand navbar-brand-centered">Transfer My Claim</div>
</div>
</div><!-- /.container-fluid -->
</nav>
<div class="query-container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-success btn-circle"></a>
<p>Dates</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled"></a>
<p>Status</p>
</div>
<div class="stepwizard-step">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled"></a>
<p>Position</p>
</div>
<div class="stepwizard-step">
<a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled"></a>
<p>Consent</p>
</div>
</div>
</div>
<form role="form">
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<h4>Please provide the claim dates</h4>
<label>Loss/Incident Date?</label>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label for="incidentdateday">Day</label>
<input type="text" name="incidentdateday" id="incidentdateday" required="required" class="form-control"/>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="incidentdatemonth">Month</label>
<input type="text" name="incidentdatemonth" id="incidentdatemonth" required="required" class="form-control"/>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="incidentdateyear">Year</label>
<input type="text" name="incidentdateyear" id="incidentdateyear" required="required" class="form-control"/>
</div>
</div>
</div>
<label>Limitation Date?</label>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label for="limitationdateday">Day</label>
<input type="text" name="limitationdateday" id="limitationdateday" required="required" class="form-control"/>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="limitationdatemonth">Month</label>
<input type="text" name="limitationdatemonth" id="limitationdatemonth" required="required" class="form-control"/>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="limitationdateyear">Year</label>
<input type="text" name="limitationdateyear" id="limitationdateyear" required="required" class="form-control"/>
</div>
</div>
</div>
<label>Next Court Date?</label>
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label for="nextcourtdateday">Day</label>
<input type="text" name="nextcourtdateday" id="nextcourtdateday" required="required" class="form-control"/>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="nextcourtdatemonth">Month</label>
<input type="text" name="nextcourtdatemonth" id="nextcourtdatemonth" required="required" class="form-control"/>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="nextcourtdateyear">Year</label>
<input type="text" name="nextcourtdateyear" id="nextcourtdateyear" required="required" class="form-control"/>
</div>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<h4>Why is the status of your claim?</h4>
<div class="form-group">
<label for="name">Current Solicitors</label>
<input type="text" required="required" class="form-control"/>
</div>
<label>Funding Arrangement?</label>
<div class="funkyradio">
<div class="funkyradio-primary">
<input type="radio" name="type" id="radio1" required="required" />
<label for="radio1">CFA</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="type" id="radio2" required="required" />
<label for="radio2">DBA</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="type" id="radio3" required="required" />
<label for="radio3">PRIVATE</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="type" id="radio4" required="required" />
<label for="radio4">LEI</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="type" id="radio5" required="required" />
<label for="radio5">Other</label>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-12">
<div class="col-md-12">
<h4>What is the current position?</h4>
<div class="funkyradio">
<div class="funkyradio-primary">
<input type="radio" name="reason" id="radio6" required="required" />
<label for="radio6">Pre-Action</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="reason" id="radio7" required="required" />
<label for="radio7">Pproceedings</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="reason" id="radio8" required="required" />
<label for="radio8">Allocated To A Track</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="reason" id="radio9" required="required" />
<label for="radio9">Dismissed - Appeal</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="reason" id="radio10" required="required" />
<label for="radio10">I Do Not Know</label>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" id="gotoConsent">Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-4">
<div class="col-xs-12">
<div class="col-md-12">
<h4 class="claim-heading">Consent</h4>
<table class="table table-striped table-bordered table-condensed">
<tr>
<td colspan="2">Claim Transfer Details Summary</td>
</tr>
<tr>
<td>Loss / Incident Date</td>
<td>-</td>
</tr>
<tr>
<td>Limitation Date</td>
<td>-</td>
</tr>
<tr>
<td>Next Court Date</td>
<td>-</td>
</tr>
<tr>
<td>Current Solicitors</td>
<td>-</td>
</tr>
<tr>
<td>Funding Arrangement</td>
<td>-</td>
</tr>
<tr>
<td>Telephone Number</td>
<td>-</td>
</tr>
<tr>
<td>Current Position</td>
<td>-</td>
</tr>
</table>
<button class="btn btn-primary nextBtn btn-lg btn-block" type="submit" >Consent & Submit</button>
</div>
</div>
</div>
</form>
</div>
body{
margin-top:0px;
}
.navbar-brand-centered {
display: block;
width: auto;
text-align: center;
margin-top:0;
padding: 0px !important;
}
.navbar>.container .navbar-brand-centered,
.navbar>.container-fluid .navbar-brand-centered {
margin-left: -80px;
}
.stepwizard-step p {
margin-top: 3px;
font-size: 12px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.funkyradio div {
clear: both;
overflow: hidden;
}
.funkyradio label {
width: 100%;
border-radius: 3px;
border: 1px solid #D1D3D4;
font-weight: normal;
}
.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
display: none;
}
.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
position: relative;
line-height: 2.5em;
text-indent: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
/*width: 2.5em;*/
/*background: #D1D3D4;*/
border-radius: 3px 0 0 3px;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
color: #888;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
content: ' ';
text-indent: .9em;
color: #C2C2C2;
}
.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
color: #000;
}
.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
content: ' ';
text-indent: .9em;
color: #fff;
background-color: #ccc;
}
.funkyradio input[type="radio"]:focus ~ label,
.funkyradio input[type="checkbox"]:focus ~ label {
box-shadow: 0 0 0 3px #999;
}
.funkyradio-default input[type="radio"]:checked ~ label,
.funkyradio-default input[type="checkbox"]:checked ~ label {
color: #333;
background-color: #ccc;
}
.funkyradio-primary input[type="radio"]:checked ~ label,
.funkyradio-primary input[type="checkbox"]:checked ~ label {
color: #fff;
background-color: rgba(126, 148, 69,.5);
}
.funkyradio-success input[type="radio"]:checked ~ label,
.funkyradio-success input[type="checkbox"]:checked ~ label {
color: #fff;
background-color: #5cb85c;
}
.funkyradio-danger input[type="radio"]:checked ~ label,
.funkyradio-danger input[type="checkbox"]:checked ~ label {
color: #fff;
background-color: #d9534f;
}
.funkyradio-warning input[type="radio"]:checked ~ label,
.funkyradio-warning input[type="checkbox"]:checked ~ label {
color: #fff;
background-color: #f0ad4e;
}
.funkyradio-info input[type="radio"]:checked ~ label,
.funkyradio-info input[type="checkbox"]:checked ~ label {
color: #fff;
background-color: #5bc0de;
}
.stepwizard-row .btn {
padding: 5px;
}
.btn {
box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);
}
.btn-success {
background-color: #7e9445 !important;
border-color: #7e9445 !important;
}
.nextBtn {
background-color: #548235 !important;
border-color: #444 !important;
padding: 5px 30px !important;
font-size: 14px !important;
letter-spacing: 1px;
}
.nextBtn:focus, .btn-success.focus, .btn-success:focus {
box-shadow: 0 0 0 0.2rem rgba(126,148,69,.5);
}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus,
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(126,148,69,.5);
}
.form-control:focus {
border-color: #7e9445 !important;
box-shadow: none !important;
}
h4 {
font-size: 15px !important;
}
.query-container {
width: 500px;
margin: 0 auto;
border: 1px solid #D1D3D4;
padding: 35px;
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
opacity: 1 !important;
}
td {
width: 1%;
padding: 3px 5px !important;
font-size: 14px;
border: 1px solid #fff;
}
tr:nth-child(odd) {background: #f2f2f2}
tr:nth-child(even) {background: #e9ebf5}
@media only screen and (max-width: 550px) {
.query-container {
width: 80%;
margin: 0 auto;
border: 1px solid #D1D3D4;
padding: 35px;
}
}
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-success').addClass('btn-default');
$item.addClass('btn-success');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='radio'],input[type='email'],input[type='number'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-success').trigger('click');
$('#gotoConsent').click(function(){
$('#step-4').show();
})
});
