<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container" style="margin-top: 100px;">
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Departamento Pessoal">
<span class="round-tab">
Departamento Pessoal
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Recursos Humanos">
<span class="round-tab">
Recursos Humanos
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Assessoria Contábil">
<span class="round-tab">
Assessoria Contábil
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Assessoria Tributária">
<span class="round-tab">
Assessoria Tributária
</span>
</a>
</li>
</ul>
</div>
<form role="form">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3>Departamento Pessoal</h3>
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="panel panel-warning">
<div class="panel-body">
<span class="title">Rotinas trabalhistas</span>
<span class="price">R$1299.00</span>
</div>
<div class="panel-footer text-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<span class="glyphicon glyphicon-unchecked"></span>
<input id="chk1" type="checkbox" name="products"/>
<label for="chk1">Não selecionado</label>
</label>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="panel panel-warning">
<div class="panel-body">
<span class="title">Controle mensal de férias</span>
<span class="price">R$201.99</span>
</div>
<div class="panel-footer text-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<span class="glyphicon glyphicon-unchecked"></span>
<input id="chk2" type="checkbox" name="products"/>
<label for="chk2"> Não selecionado</label>
</label>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="panel panel-warning">
<div class="panel-body">
<span class="title">Obtenção de CND, CRF, conectividade social</span>
<span class="price">R$222.99</span>
</div>
<div class="panel-footer text-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<span class="glyphicon glyphicon-unchecked"></span>
<input id="chk3" type="checkbox" name="products"/>
<label for="chk3">Não selecionado</label>
</label>
</div>
</div>
</div>
</div>
</div>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-primary next-step">Avançar</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Recursos Humanos</h3>
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="panel panel-warning">
<div class="panel-body">
<span class="title">Recrutamento e seleção</span>
<span class="price">R$1200.00</span>
</div>
<div class="panel-footer text-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<span class="glyphicon glyphicon-unchecked"></span>
<input id="chk4" type="checkbox" name="products"/>
<label for="chk4">Não selecionado</label>
</label>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="panel panel-warning">
<div class="panel-body">
<span class="title">Gestão de benefícios, Cargos e Salários</span>
<span class="price">R$400.00</span>
</div>
<div class="panel-footer text-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<span class="glyphicon glyphicon-unchecked"></span>
<input id="chk5" type="checkbox" name="products"/>
<label for="chk5">Não selecionado</label>
</label>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="panel panel-warning">
<div class="panel-body">
<span class="title">Avaliação de desempenho</span>
<span class="price">R$250.00</span>
</div>
<div class="panel-footer text-center">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<span class="glyphicon glyphicon-unchecked"></span>
<input id="chk6" type="checkbox" name="products"/>
<label for="chk6">Não selecionado</label>
</label>
</div>
</div>
</div>
</div>
</div>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Voltar</button></li>
<li><button type="button" class="btn btn-primary next-step">Avançar</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h3>Assessoria Contábil</h3>
<p>Ainda não possui serviço</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Voltar</button></li>
<!--<li><button type="button" class="btn btn-default next-step">Skip</button></li>-->
<li><button type="button" class="btn btn-primary btn-info-full next-step">Avançar</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Assessoria Tributária</h3>
<p>Ainda não possui serviço</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Voltar</button></li>
<li><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Finalizar</button></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Orçamento online</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form role="form">
<label>Valor total do orçamento: <span class="round-tab" id="total">R$0.00</span></label>
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Nome completo" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="email" name="email" placeholder="Endereço de e-mail" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="mobile" name="mobile" placeholder="Telefone para contato" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Sua mensagem" required>
</div>
<div class="form-group">
<textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
<span class="help-block">
<p id="characterLeft" class="help-block ">Você atingiu o limite</p>
</span>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" id="submit" name="submit" class="btn btn-primary">Solicitar mais detalhes</button>
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
.title {
display: block;
font-weight: bold;
font-size: 1.5em;
}
.desc {
display: block;
font-size: 1.5em;
}
.price {
font-size: 1.25em;
}
.panel-body {
min-height: 7em;
}
.btn-group .btn span,
.btn-group .btn input[type='checkbox'] {
padding-top: 0.5em;
padding-bottom: 0em;
}
.total-area {
margin-top: 2em;
font-weight: bold;
text-align: right;
}
.btn-group .btn label {
cursor: pointer;
}
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
var checkOptions = {
id: "",
checkedGlyph: "glyphicon-ok-circle",
uncheckedGlyph: "glyphicon-unchecked",
checkedBtnClass: "btn-success",
uncheckedBtnClass: "btn-primary",
checkedText: "Selecionado",
uncheckedText: " Não selecionado"
};
var totalOptions = {
id: "#total",
priceClass: ".price",
priceContainerClass: ".panel"
}
$(document).ready(function() {
$("[type='checkbox']").on('change', function() {
if ($(this).prop('checked')) {
setChecked($(this));
} else {
setUnchecked($(this));
}
calculateTotal($(this));
});
var checked = $(checkOptions.id + " .btn-group input:checked");
setChecked(checked);
for (var i = 0; i < checked.length; i++) {
setChecked($(checked[i]));
calculateTotal($(checked[i]));
}
$("input:checked").prev()
.removeClass('glyphicon-unchecked')
.addClass('glyphicon-ok-circle');
$("input:checked").parent()
.addClass('active')
function setChecked(ctl) {
$(ctl).prev()
.removeClass(checkOptions.uncheckedGlyph)
.addClass(checkOptions.checkedGlyph);
$(ctl).parent()
.removeClass(checkOptions.uncheckedBtnClass)
.addClass(checkOptions.checkedBtnClass);
$(ctl).next().text(checkOptions.checkedText);
}
function setUnchecked(ctl) {
$(ctl).prev()
.removeClass(checkOptions.checkedGlyph)
.addClass(checkOptions.uncheckedGlyph);
$(ctl).parent()
.removeClass(checkOptions.checkedBtnClass)
.addClass(checkOptions.uncheckedBtnClass);
$(ctl).next().text(checkOptions.uncheckedText);
}
//The following function defaults the optional parameters of symbol and separator to USD format
function stripCurrency(value, symbol, separator) {
symbol = (typeof symbol == 'undefined' ? 'R$' : symbol);
separator = (typeof separator == 'undefined' ? ',' : separator);
value = value.replace(symbol, "")
.replace(separator, "")
.replace(" ", "");
return value;
}
//The following function breaks the number into an array based on where the decimal point is, create currency with the separator, then join them together with the $ symbol and number after decimal
function formatCurrency(value, decimals, decpoint, separator, symbol) {
decimals = (typeof decimals == 'undefined' ? 2 : decimals);
decpoint = (typeof decpoint == 'undefined' ? '.' : decpoint);
separator = (typeof separator == 'undefined' ? ',' : separator);
symbol = (typeof symbol == 'undefined' ? 'R$' : symbol);
var parts = value.toFixed(decimals).toString().split(decpoint);
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, separator);
return (symbol + parts.join(decpoint)).toLocaleString();
};
function calculateTotal(ctl) {
var total = $(totalOptions.id).text();
total = stripCurrency(total);
var price = $(ctl).closest(totalOptions.priceContainerClass).find(totalOptions.priceClass).text();
price = stripCurrency(price);
if ($(ctl).prop("checked")) {
// Add to total
total = parseFloat(total) + parseFloat(price);
} else {
//Subtract from total, add to total
total = parseFloat(total) - parseFloat(price);
}
$(totalOptions.id).text(formatCurrency(total));
};
});
$(document).ready(function(){
$('#characterLeft').text('140 caracteres restantes');
$('#message').keydown(function () {
var max = 140;
var len = $(this).val().length;
if (len >= max) {
$('#characterLeft').text('Você atingiu o limite');
$('#characterLeft').addClass('red');
$('#btnSubmit').addClass('disabled');
}
else {
var ch = max - len;
$('#characterLeft').text(ch + ' caracteres restantes');
$('#btnSubmit').removeClass('disabled');
$('#characterLeft').removeClass('red');
}
});
});
